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"O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。 
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“一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。” 


Irish Times 


“Tim 是 位 特 立 独 行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 且 切 实地 按照 
Yogi Berra 的 建议 去 做 了 :“ 如 果 你 在 路 上 遇 到 岔路 口 ， 走 小 路 (岔路 )。 回顾 过 
去 ，Tim 似乎 每 一 次 都 选择 了 小 路 ， 而 且 有 几 次 都 是 一 闪 即 进 的 机 会 ， 尽 管 大 路 
也 ,不错 。 
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“千言 万 语 都 难以 表达 我 对 这 本 书 的 感激 之 情 ， 它 指导 我 改进 了 正在 开发 的 应 
用 ! 99 
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译 者 序 


智能 手机 、 平 板 电脑 等 移动 终端 的 进一步 风靡 ， 使 得 移动 应 用 议 计 成 了 一 个 热门 行 
业 。 移 动 应 用 的 设计 质量 影响 着 内 容 提 供 方 的 竞争 力 ， 虽 然 移 动 操作 系统 目前 处 于 
战国” 时代 ,但 茶 些 操作 系统 以 其 独特 的 范 争 优势 已 切 现 条 势 。 不 同 的 操作 系统 对 
移动 应 用 的 设计 有 不 同 的 要 求 和 约束 ， 但 上 总体 来 讲 还 是 要 符合 “以 人 为 本 ”的 设计 
理念 。 那 么 ， 在 移动 应 用 设计 行业 内 部 ， 设 计 师 们 应 该 如 何 借鉴 、 参 考 其 他 终端 的 
交互 设计 ， 开 发 出 真正 能 吸引 用 户 的 移动 应 用 呢 ?” 目 前 已 有 很 多 从 不 同 角 度 介绍 移 
动 应 用 设计 的 书籍 ， 本 书 从 已 有 的 委 例 出 发 ， 以 丰富 的 图 像 和 向 炼 的 语言 癌 读 者 介 
绍 当前 移动 应 用 界面 设计 模式 的 不 同类 型 。 


本 书 的 作者 Theresa Neil 从 2001 年 就 开始 从 事 于 用 户 界 面 设计 行 业 ， 在 过 去 的 十 多 
年 中 ， 特 丽 莎 主持 了 100 多 项 关于 网 站 、 采 面 系 统 和 移动 应 用 设计 的 项 目 。 她 曾 在 
Sabre 科技 公司 的 航空 解决 方案 子 公 司 任 可 用 性 主管 一 职 ， 之 后 建立 了 自己 的 用 户 
体验 设计 咨询 公司 。 她 的 客户 包括 各 种 类 型 的 世界 500 强 企 业 和 非 营 利 组 织 。 正 是 
特 丽 莎 如 此 丰富 的 行业 经 历 保 证 了 本 书 的 专业 性 和 权威 性 。 


要 设计 出 优秀 的 移动 应 用 ， 就 要 先 了 解 目 前 不 同 操作 系统 下 优秀 的 设计 和 案例。 本 书 
介绍 了 当前 所 有 移动 操作 系统 下 典型 的 设计 模式 ， 截 取 了 这 些 系 统 下 典型 应 用 的 界 
和 面 设计 ， 将 其 分 为 了 以 下 10 大 类 。 

(1) 导航 设计 模式 : 主要 导航 和 次 要 导航 模式 。 

(2) 表单 设计 : 通过 表单 实现 民 好 的 布局 和 内 容 输 入 。 

(3) 表格 和 列表 的 设计 : 通过 表格 和 表单 简明 扼要 地 显示 最 重要 的 信息 。 

(4) 

(5) 


| 


4) AR AUR: 通过 这 些 功能 的 易 用 性 增强 用 户 的 主动 性 。 
5) 工具 的 设计 : 民 好 的 工具 设计 能 营造 出 直接 交互 的 使 用 体验 。 


6) 图 表 设 计 模 式 : 让 用 户 拥 有 控制 大 量 数据 内 容 的 能 
7) 视觉 吸引 : 吸引 用 户 并 促使 其 发 现 产 品 功能 。 


Mi W 


9) 帮助 : 真正 为 用 户 提 供 解 决 问题 的 方法 ， 而 不 是 告知 用 户 问 题 是 什么 。 


( 
( 
(8) 控制 与 反馈 : 帮助 用 户 执 行 操作 ， 并 及 时 提供 反馈 。 
( 
(10) RRN: 移动 应 用 设计 中 应 该 避免 犯 的 错误 。 


本 书面 向 的 读者 是 创建 移动 应 用 的 产品 经 理 、 设 计 师 和 开发 者 。 无 论 是 针对 某 一 移 
动 操 作 系 统 设计 一 球 简 单 的 应 用 ， 还 是 开发 应 用 于 市 场 上 所 有 操作 系统 的 移动 应 用 ， 
本 书 都 能 为 行业 内 的 人 员 提 供 帮 助 。 另 外 ， 本 书 还 可 以 作为 智能 手机 及 其 应 用 爱好 
者 的 参考 读物 ， 书 中 400 多 张 的 应 用 设计 截图 能 极 大 地 开阔 你 的 视野 。 


译 者 对 于 移动 应 用 界面 设计 具有 浓厚 的 兴趣 ， 也 正在 从 事 这 方面 的 教学 工作 。 在 翻 
译本 书 的 过 程 中 ， 译 者 了 解 到 了 非常 丰富 的 设计 模式 和 界面 类 型 ， 本 书 原作 者 关于 
设计 模式 的 心得 和 体会 读 来 也 让 译 者 受益 颇 丰 。 书 中 的 内 容 能 对 译 者 的 工作 提供 
了 非常 大 的 帮助 ， 在 此 感谢 本 书 原作 者 Theresa 为 我 们 带 来 了 如 此 好 的 一 本 设计 参 
考 书 。 

很 多 人 为 本 书 的 翻译 工作 提供 了 帮助 和 支持 ， 在 此 表示 感谢 。 感 谢 我 的 同事 平时 对 
日 常 工作 的 分 担 ， 使 得 我 有 更 多 的 时 间 投 入 到 本 书 的 翻译 工作 。 感 谢 我 的 妻子 平时 
对 我 无 微 不 至 的 照顾 ， 让 我 能 有 健康 的 身体 投入 工作 。 感 谢 我 可 爱 的 女儿 ， 能 让 我 
在 感到 疲劳 时 重新 燃 起 斗志 。 感 谢 人 民 邮 电 出 版 社 图 灵 公 司 的 编辑 全 志 红 ， 她 别 具 
慧眼 的 选 题 使 得 本 书 的 中 文 版 得 以 面世 ， 为 本 书 的 出 版 作出 了 不 小 的 贡献 。 感 谢 所 
有 为 本 书 的 翻译 、 出 版 工作 提供 了 帮助 的 人 们 | 


在 书籍 翻译 过 程 中 ， 译 者 已 及 时 对 原 者 中 出 现 的 些许 印刷 错误 作 了 i] 正 ， 在 此 不 再 
一 一 指出 。 


由 于 译 者 的 英文 理解 能 力 和 中 文 表 达能 力 有 限 ， 译 文 难免 出 现 错误 和 丝 漏 ， 和 希望 领 
域内 的 各 位 同行 和 专家 予以 批评 指正 。 


希望 本 书 能 对 读者 的 工作 和 学 习 有 所 帮助 ! 


EE 
2012 4F 8 月 


mi 


序 


如 本 要 为 未 些 东西 命名 ， 束 要 开始 去 了 解 这 些 东西 。 


R 5 多大 的 儿子 和 其 他 小 护 一 样 ， 喜 欢 看 天 上 的 云 朱 。 几 周 前 他 得 知 ， 不 同 的 云 朱 
有 不 同 的 名 称 。 出 于 对 这 些 东西 的 狂热 ， 他 开始 答 试 记 住 这 些 云 未 的 名 称 一 一 卷 云 、 
AB. Ba, BEB. AMA. MAB. RK, KRAMER, BRAK 
FERA AEA. FEI ZA, RMA Et “RAZ” — d. 


现在 ， 仰 望 天 空 ， 他 能 告诉 我 哪 片 云 夫 叫 什 么 名 字 。 除 此 之 外 ， 他 还 发 现 了 比 以 前 
更 多 类 型 的 云 林 ， 而 且 也 观察 得 更 加 细致 。 他 也 学 会 了 通过 云 打 的 质感 、 颜 色 、 高 
度 、 运 动 轨迹 等 要 素来 判断 云 末 的 类 型 ， 说 不 定 还 有 别 的 要 素 。( 当 然 ， 有 了 时候 区 别 
这 些 云 玉 很 困难 ， 但 这 完全 影响 不 到 他 的 兴致 。) 他 还 能 预测 哪 种 云 会 市 来 雨水 ， 哪 
种 不 会 ， 有 时 候 还 很 准确 呢 。 


基于 上 自己 苞 握 的 云 打 知识 ， 他 以 学 龄 前 儿童 特有 的 风格 分 析 着 气象 趋势 。“ 卷 层 云 预 
示 着 暧 锋 ，” 他 说 ,“ 浓 积 云 会 变 成 积 雨 云 ! 然后 就 会 带 来 暴风 雨 。 


总 之 ， 他 很 享受 了 解 这 些 云 厅 名 称 的 过 程 。 小 孩子 似乎 非常 乐意 为 自己 喜欢 的 东西 
RAS, IER. ME. ME, RE, REE, Me He. SA, tilh 
想象 力 不 仅 仅 局 限于 大 脑 中 存留 的 知识 。 我 的 儿子 虽然 把 茶 些 云 未 称 为 “ 积 云 ， 但 
他 却 依然 能 从 中 看 到 宫殿 、 了 鸭子 和 花椰菜 一 一 我 们 成 人 则 认为 这 是 浪漫 情 怀 的 体现 。 


现在 该 说 说 我 们 大 人 的 事情 了 ， 也 就 是 本 书 的 主题 : 通过 识别 界面 ， 并 为 其 命名 ， 
我 们 能 更 好 地 了 解 这 些 春 面 。 我 们 的 大 脑 能 够 明确 要 寻找 什么 东西 ， 所 以 能 关注 


注 1: 气象 学 术语 ， 指 暖气 团 前 移 取代 冷气 团 过 程 中 位 于 暖气 团 前 端的 锋 。( 译 者 注 ) 


到 更 多 的 细节 。 我 们 知道 荣 些 特定 的 界面 类 型 征 如 何 工 作 的 ， 所 以 可 以 预测 目 己 
所 使 用 软件 的 行为 。 我 们 也 可 以 告诉 其 他 人 ， 荣 个 以 特殊 形式 显示 的 新 词汇 表示 
TZ. 


那么 ， 我 们 怎样 才能 记 住 这 些 类 型 呢 ? 


在 儿子 学 习 关 于 云 示 的 知识 时 ， 对 他 来 说 ， 图 请 息 最 好 的 工具 。 他 得 看 了 大 量 了 的 
图 片 。 通 过 一 些 书 籍 和 网 站 了 解 了 云 打 的 分 类 知识 之 后 ， 他 学 习 观 察 不 同类 型 云 示 
之 间 更 为 细微 的 差异 ， 有 些 差异 是 很 难 用 语言 描述 的 。 


A, WER Se Pc AP BJ A he BACH Bl. Pe PEA, PAM, 
ADR AS ERR We, FR SS ARER SY ff e PE (8 FELD SS E 
不 同类 型 界面 之 间 有 哪些 差异 ! 但 很 明显 ， 所 有 只 楚 设 计 界 面 的 人 一 一 也 就 是 那些 
需要 了 解 界面 的 类 型 ， 将 这 些 知识 作为 职业 素养 的 人 一 一 并 不 需要 这 些 文 字 。 对 于 
一 种 界面 类 型 ， 他 们 需要 的 仅仅 古 通 过 充分 的 朱 述 记 住 这 种 类 型 ， 然 后 再 看 一 些 从 
现实 生活 中 精心 挑选 的 例子 ， 以 此 来 固化 并 记 住 相关 的 知识 。 


在 本 书 中 ，Theresa Neil 收集 了 大 量 的 界面 设计 图 片 。 我 向 直 无 法 想象 需要 付出 多 大 
的 努力 才能 完成 这 项 工作 ， 我 自己 也 尝试 过 训 览 如 此 多 的 移动 应 用 ， 找 出 最 有 
效 的 那些 ， 然 后 把 所 有 的 截屏 截图 仔细 地 进行 归 类 ， 这 绝 不 是 件 小 事 。 

对 于 移动 应 用 界面 设计 师 来 说 ， 这 本 书 无 颖 是 笔 巨 大 的 财富 。 如 有 末 你 喜欢 ， 可 以 直 
接 阅 读 这 本 书 的 内 容 ， 也 可 以 利用 其 中 的 例子 改进 你 的 设计 。 


。 你 需要 目 己 评判 这 些 例子 中 的 哪些 最 有 效 ， 找 出 那些 对 于 你 的 设计 情景 最 有 效 的 界 
面 类 型 。 


。 把 这 本 书 作 为 创作 的 灵感 源 录 。 我 自己 非常 欣 商 书 中 屏幕 截图 的 设计 ， 比 如 图 标的 
设计 、 色 彩 的 搭配 ， 而 不 是 界面 的 类 型 。 


。 用 这 本 书 来 拓展 你 的 知识 ， 它 能 帮助 你 了 解 当前 应 用 的 工作 原理 ， 你 不 需要 费力 殉 
神 地 下 载 ， 并 亲自 使 用 这 些 应 用 (不 要 忘 了 ， 你 需要 有 多 个 设备 才能 试用 完 这 些 
应 用 )。 

读 轩 掩 卷 ， 在 目 己 日 第 使 用 的 移动 应 用 中 寻找 相应 的 界面 类 型 实例 。 实 际 上 ， 只 

你 知道 了 这 些 类 型 的 名 称 ， 就 一 定 会 不 由 自主 地 这 样 做 。 我 儿子 在 户外 儿 次 向 我 指 

出 “ 浓 积 云 ” 之 后 ， 我 束 记 得 非常 清楚 了， 哎呀 一 一 真 不 知道 以 前 我 不 知道 这 些 事 

之 前 邦 古 如 何 生 活 的 。 


尽情 地 享受 这 本 书 吧 | 
Jenifer Tidwell 


z 
mif 


内 容 简介 


我 们 最 近 在 进行 一 项 新 的 移动 应 用 设计 项 目 ， 所 有 有 经 验 的 移动 设计 师 都 抽 不 开 身 。 
我 只 有 不 到 一 周 的 时 间 ， 把 目 己 在 移动 交互 设计 项 目 方面 的 经 验 分 享 给 新 手 设计 师 ， 
所 以 我 用 大 量 的 截屏 截图 制作 了 一 个 快速 入 门 教 程 ， 其 中 描述 了 比较 好 的 设计 和 不 
太 好 的 设计 。 这 样 ， 就 逐 壮 累积 成 了 一 系列 不 同类 型 的 移动 应 用 设计 方案 。 


虽然 我 对 这 些 不 同类 型 的 界面 设计 进行 了 分 类 ， 但 我 知道 真正 的 价值 并 不 在 于 
识别 出 某 个 界面 的 类 型 ， 而 是 收集 的 数 以 百 计 的 设计 和 案例。 本 书 不 仅仅 只 包括 
了 作者 本 人 所 喜爱 的 界面 设计 的 抽象 模式 ， 而 且 还 是 移动 应 用 设计 的 展示 平 
台 ， 其 中 包含 了 大 量 的 设计 案例。 其 中 有 超过 400 5K 24 Bj v AF iOS, Android, 
BlackBerry, WebOS, Symian 和 Windows 等 系统 的 应 用 程序 的 屏幕 截图 ， 并 对 其 
进行 了 分 类 。 本 书 的 网 站 www.mobiledesignpatterngallery.com 和 Flickr EA #8 Fr zs 
(Photostream) 内 包括 更 多 的 案例 。 


读者 对 象 


本 书面 癌 创 建 移动 应 用 的 产品 经 理 、 设 计 师 和 开发 者 。 随 着 企业 定义 并 改进 上 自身 的 
移动 应 用 策略 ， 寻 找 最 有 效 的 设计 案例 变 得 异 闻 艰难 ， 特 别 征 那些 应 用 于 多 操作 系 
统 的 设计 。 无 论 是 设计 一 款 简 单 的 iPhone 应 用 ， 还 是 为 市 场 上 所 有 流行 的 操作 系统 
设计 产品 ， 本 书 中 的 设计 案例 都 能 为 沼 见 的 设计 问题 提供 解决 思路 。 


Safari^XE £k B Ji 
D. Safari 在 线 书 店 (Safari Books Online) 是 一 个 能 及 时 啊 
Sa fa ri 应 读者 需求 的 数字 图 书馆 ， 你 可 以 在 其 中 搜索 到 7500 本 
Books Online 以 上 的 技术 书籍 、 创 意 参 芳 书 籍 ， 还 有 能 帮助 你 迅速 解 
决 回 题 的 视频 教程 。 


订阅 之 后 ， 你 可 通过 手机 或 移动 设备 访问 该 在 线 书店 的 所 有 书籍 内 容 ， 观 看 所 有 视 
频 。 还 可 以 在 新 书 付 桩 之 前 阅读 书 夭 内容， 阅读 那些 还 设 有 扎 写 完 成 的 书稿 ， 并 癌 
作者 反馈 信息 。 除 此 之 外 ， 你 还 可 以 复制 示例 代码 、 下 载 喜 欢 的 草 贡 、 为 关键 的 部 
分 定义 书签 、 创 建 笔记 、 打 印 页 面 以 及 享受 其 他 方便 便捷 的 功能 所 珊 来 的 好 处 。 


O'Reilly Media 公司 已 经 把 这 本 书 〈 英 文 版 ) 上传 到 了 Safari 在 线 书店 。 点 击 http:// 
my.safaribooksonline.com 人 免费 注册 ， 你 就 可 以 访问 本 书 英 文 版 以 及 O^ Reilly 和 其 他 
出 版 社 出 版 的 同类 书籍 。 
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注 1: 读者 可 以 登录 图 灵 社 区 (ituring.com.cn) 查看 本 书 相 关 信息 。( 编 者 注 ) 
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北京 市 西城 区 西直门 南大 街 2 m BER AE C HE 807 (100035) 
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O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘误 


表 、 示 例 代 码 以 及 其 他 信息 。 本 书 的 网 站 地 址 古 : 
http://oreilly.com/catalog/9781449314323 

中 文书 : 
http://www .oreilly.com.cn/index.php?func-book&isbnz9787115296481 

对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 
bookquestions G oreilly.com 

关于 本 书 的 更 多 信息 、 会 议 、 资 源 中 心 和 了 网络， 请 访问 以 下 网 站 : 
http://www.oreilly.com 

我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 

请 关注 我 们 的 Twitter 动态 : 
http://twitter.com/oreillymedia 

我 们 的 YouTube 视频 地 址 如 下 : 


http://www.youtube.com/oreillymedia 
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导航 


主要 导航 模式 : 跳板 式 (Springboard), WHAT (List Menu)、 选 项 卡 菜 单 式 
(Tab Menu). 、 陈 列 馆 式 (Gallery). (XÆ (Dashboard), KININ (Metaphor), #8 
级 菜单 式 (Mega Menu), 


次 级 导航 模式 : 页 面 轮 盘 式 (Page Carousel), 、 图 片 轮 盘 式 (Image Carousel), PR 
列表 式 (Expanding List) 。 


我 喜欢 阅读 移动 应 用 市 场 里 的 用 户 评 论 ， 以 此 来 更 好 地 了 解 人 们 是 如 何 使 用 这 些 应 
用 的 。 市 场 评分 系统 古 极 具 价 值 的 反馈 工具 ， 传 统 的 网 络 和 桌面 应 用 程序 都 不 具备 
这 样 的 功能 。 它 提供 了 丰富 的 关于 客户 偏好 和 期 望 的 信息 。 


一 般 来 说 ， 大 部 分 给 出 4 星 或 5 星 的 评论 都 不 是 十 分 具体 。 这 些 评论 通 第 是 :“ 非 常 
REA — aR, “ER EIR, ISTH RD.” 而 1 星 或 2 星 的 评论 却 包含 有 更 多 
的 内 容 ， 这 类 评论 大 都 指出 了 应 用 的 问题 所 在 。 常 见 的 负面 反馈 大 致 如 下 : 


。 ERP HATE 

。 RSE EN (H, Reve, ERIKA) 

。 FRSA 〈 无 法 返回 ， 找 不 到 某 些 东西 ……) 

。 (ERLEBT IR ELT 
前 两 项 问题 无 法 通过 改变 界面 模式 解决 ， 但 用 户 经 和 常 抱 她 的 第 三 、 第 四 两 项 问题 却 
是 可 以 通过 使 用 不 同 模式 的 界面 解决 的 。 参 考 常 见 的 导航 设计 模式 ， 可 以 保证 用 户 
能 够 在 你 的 应 用 中 找到 并 使 用 那些 有 用 的 功能 。 


1.1 主要 导航 模式 

正如 精良 的 设计 一 样 ， 优 秀 的 导航 也 大 象 无 形 。 不 管 是 浏览 好 友信 息 ， 还 是 租赁 汽 
车 ， 完 美的 导航 设计 能 让 用 户 根 据 直 觉 使 用 应 用 程序 ， 也 能 让 用 户 韭 常 容易 地 完成 
所 有 任务 。 一 款 应 用 的 导航 可 以 被 设计 成 各 种 样式 ， 但 我 想 着 重 介绍 6 种 主要 的 导 
航模 式 ， 也 就 是 主 菜 单 的 导航 模式 (E 1-1), 


8 A MEX 


EN 5| E XX 


a 
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图 1-1 主要 导航 模式 


1.1.1 跳板 式 
跳板 式 导 航 对 操作 系统 并 没有 特殊 要 求 ， 在 各 种 设备 上 都 有 民 好 表现 。 它 有 时 也 被 
称 为 “快速 启动 板 ”(Launchpad)。 跳 板式 导航 的 特征 是 ， 登 录 界 面 中 的 菜单 选项 
就 是 进入 各 个 应 用 的 起 点 。Facebook 应 用 沿用 了 iOS 主 界面 上 的 跳板 式 设 计 ， 其 他 
应 用 随 之 跟风 〈 见 图 1-2 至 图 1-4). 
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Account facebook 


News Feed Profile Friends 
Messages Places Groups 
pee Lonely Planet 
I = 
Events Photos Chat $ 


um Notifications 


1-2 Facebook 的 跳板 式 导航 和 Ovi Maps 应 用 


11:56 AM 


4») 35. 4| (7) 2:06 PM 


Linked in 


trulia 

Ulla x 

u real estate search ( ) q 
Updates Connections 


For Sale Open Houses Reduced 

Invitations Search 
For Rent New Search Sold 
- — - Reconnect Messages 
My Trulia Feedback More 


4 1 1-34 e 


1-3 Trulia 和 LinkedIn 的 导航 设计 


Bara ladda 


MyFriends SOWSET Add more 


Open next > 


1-4 Palm 手机 上 的 NewsRoom 和 Nokia 手机 上 的 Yahoo | 


个 性 化 的 跳板 式 导航 可 在 显示 末 单 选项 的 同时 显示 用 户 个 人 资料 。 通 和 常会 提供 自 定 
义 功能 ， 允 许 用 户 改 变 跳板 式 导航 的 布局 (ULI 1-5)。 


iPod = 8:27 PM a= Brad Fults checked in on Gowalla. 
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1-5 PayPal 用 户 个 性 化 的 跳板 式 导 航 和 Gowalla 应 用 的 早期 版 本 


常见 的 布局 形式 是 3x3、2x3、2x2 和 1x2 的 网 格 ( 见 图 1-6)。 但 跳板 式 导 航 不 一 
定 非 要 拘泥 于 网 格 布 局 ， 你 可 以 成 比例 地 放大 某 些 选项 ， 以 彰显 其 重要 性 。 在 iPhone 
的 应 用 Masters F, VIDEO 选项 就 是 其 他 菜单 选项 的 2 ~ 3 倍 大 (WEA 1-7). 


1-6 ”跳板 式 导 航 的 网 格 布局 
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Rj 8 


m 为 同等 重要 的 内 容 项 使 用 网 格 布局 ， 为 相 比 之 下 更 为 重要 的 内 容 项 使 用 不 
。 规则 布局 形式 。 视 情况 使 用 个 性 化 设置 和 自 定义 选项 。 


1.1.2 ”列表 菜单 式 


列表 菜单 式 导航 与 跳板 式 导航 的 共同 点 在 于 ， 每 个 菜单 项 都 是 进入 应 用 各 项 功能 的 入 
口 点 。 这 种 导航 有 很 多 种 变化 形式 ， 包 括 个 性 化 列表 菜单 (Personalized List Menu), 
分 组 列表 (Grouped List) 和 增强 列表 (Enhanced List) 和 等。 增强 列表 是 在 简单 的 列表 
菜单 之 上 增加 搜索 、 训 览 或 过 让 之 类 的 功能 后 形成 的 〈 见 图 1-8 至 图 1-11)。 
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Ya 
列表 全 单 很 适合 用 来 显示 较 长 或 拥有 次 级 文字 内 容 的 标题 。 使 用 列表 沫 单 
。 的 应 用 要 在 所 有 次 级 屏 医 由 提供 一 个 选项 ， 用 来 返回 来 单列 表 。 通 币 的 做 


法 征 在 标题 栏 上 显示 一 个 市 有 列表 图 标 或 “菜单 ”字样 的 按钮 。 


1.1.3 选项 卡 式 
选项 卡 式 导 航 在 不 同 的 操作 系统 上 有 不 同 表现 ， 对 于 选项 卡 的 定位 和 设计 ， 不 同 操 


作 系 统 有 不 同 的 规则 LE 1-12)。 如 采 要 为 你 的 应 用 选择 这 种 导航 模式 ， 就 要 为 
不 同 的 操作 系统 专门 定义 选项 卡 的 位 置 。 
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1-12 不 同 操作 系统 内 选项 卡 的 位 置 


iOS, WebOS FH BlackBerry 系统 都 把 选项 卡 放 在 了 屏幕 底 问 ， 这 样 用 户 就 可 以 用 拇 
指 进行 操作 (ULE 1-13 和 图 1-14). 
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1-14 ”位 于 屏幕 底部 的 选项 卡 ，BlackBerry 系统 的 应 用 World 和 WorldMate 


屏幕 底部 水 平 深 动 的 选项 卡 是 个 非常 不 错 的 设计 ， 如 图 1-15 中 的 Starbucks 和 Blue 
Mobile 应 用 ， 它 可 以 在 同一 屏 内 提供 更 多 的 操作 选项 。 
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1-15 ”位 于 屏幕 底部 的 滚动 选项 卡 : Starbucks 和 Blue Mobile 应 用 


Android, Symbian 和 Windows 系统 都 把 选项 卡 定位 在 屏幕 的 顶端 ， 这 种 形式 看 
上 去 很 眼熟 ， 因 为 它 模仿 了 标准 的 网 站 导航 模式 。Nokia 和 Windows 都 在 屏幕 顶 
端 设 计 了 可 该 动 的 选项 卡 ， 用 户 移动 选项 卡 后 能 看 到 更 多 的 菜单 项 〈 见 图 1-16 和 
ID. 
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1-16 位 于 屏幕 顶端 的 滚动 选项 卡 : Harvest TimeTractor 应 用 和 Nokia 上 的 Fring 应 用 


器 iy 网 个 中 DA 川 7:39 pm 
foursquare «43908 MA Men 2 Bb 


©) HOU 7 - CHC 3 
Explore 
Cubs place Soriano on 15-day 
DL (Yahoo! Sports) 


Arms 
0.5 mi 4. 17 people 


Washington Square Park 3 Cubs place Soriano on 15-day 
i A disabled list 

Waverly PI. to West 4th St. (btwn MacDou; 

0.4 mi 4. 17 people 


Eataly 
200 5th Ave (at W 23rd St) 


0.3 mi 4.14 people Cubs put Soriano on 15-day 


Madison Square Park | MIL list 
23rd St to 26th St (btw 5th & Madison) 

1 mi 4. 14 people 

Whole Foods 

95 E. Houston St. (btwn Bowery & Chrystie) 
0.3 mi 4. 12 people 


Cubs put LF Soriano on 15- 
day DL with quad strain (AP) 


Sweetery NYC 
Moving target! 


1-17 位 于 屏幕 顶端 的 选项 卡 : Foursquare 和 HitPost 应 用 


为 已 选择 的 菜单 项 设置 不 同 的 视觉 效果 ， 用 户 就 能 清晰 地 知道 自己 选择 了 
哪 一 项 。 使 用 易于 识别 或 带 有 标签 的 图 标 。 


1.1.4 ”陈列 馆 式 

陈列 馆 式 的 设计 通过 在 平面 上 显示 各 个 内 容 项 来 实现 导航 ， 主 要 用 来 显示 一 些 文 
人 章 、 菜 谱 、 照 片 、 产 品 等 ， 可 以 布局 成 轮 盘 、 网 格 或 用 幻灯 片 演 示 ( 见 图 1-18 至 
1-20). 
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有 上 时， 对 这 些 内 容 进 行 分 组 更 易于 用 户 浏 览 。Dwell 利用 侧 边 选项 卡 把 陈列 馆 式 导 
航 里 的 内 容 组 织 成 了 可 供用 户 管理 的 内 容 块 。 
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陈列 馆 式 导航 能 很 好 地 应 用 于 用 户 需 要 经 常 浏 览 ， 频 党 更 新 的 内 容 。 
2. 


1.1.5 NRK 

仪表 式 导航 提供 了 一 种 度量 关键 顷 效 指标 (Key Performance Indicators, KPI) 是 否 
达到 要 求 的 方法 。 经 过 设计 以 后 ， 每 一 项 量度 都 可 以 显示 出 额外 的 信息 。 这 种 主要 
的 导航 模式 对 于 商业 应 用 、 分 析 工 具 以 及 销售 和 市 场 应 用 非常 有 用 ( 见 图 1-21). 
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1-21 Mint 和 Ego 应 用 中 的 仪表 式 导航 
不 要 使 用 过 多 的 仪表 式 导 航 。 你 需要 开展 研究 才能 决定 应 该 对 哪些 关键 量 
Ly 度 采用 仪表 式 导 航 。 


1.1.6 KÈ 
这 种 导航 的 特点 是 用 页 面 模 仿 应 用 的 隐喻 对 象 。 这 种 导航 主要 用 于 游戏 ， 但 在 帮助 


人 们 组 织 事物 (如 日 记 、 书 籍 、 红 酒 等 )， 并 对 其 进行 分 类 的 应 用 中 也 能 看 到 ( 见 
1-22 至 图 1-25). 
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1.1.7 超级 菜单 式 

移动 设备 上 的 超级 菜单 式 导航 与 网 站 所 用 的 超级 菜单 导航 类 似 ， 它 在 一 个 较 大 的 覆 
盖 面 板 上 分 组 显示 已 定义 好 格式 的 菜单 选项 。RipCurl 网 站 就 利用 超级 菜单 显示 服 
饰 的 次 级 类 别 (OLE 1-26), 


LJ Panier ( 0 article ) CONDE * 


MPRI 


MEN GIRLS KIDS ACCESSOIRES UNIVERS SOLDES 


一 AIi m 


J| C | EV Df 
| e + vts AQ eR es 
Live ELI TeM Set rii 


-t LAK 


Livraison offerte dés 49€ d'achat. 


1-26 RipCurlShop.com 


WebOS 系统 版 本 的 Facebook FH ERRERA iR] UL. HES, T BETON TEL E g 
的 选项 。Walmart 在 它们 的 Android 应 用 中 也 采用 了 超级 菜单 式 (JLE 1-27). 


» A 


| 在 选择 导航 模式 之 前 ， 首 先 要 确定 信息 架构 。 如 琳 要 导航 的 对 象 仅 仅 是 应 
Ly 。 ”用 中 少数 主要 内 容 ， 束 可 以 使 用 选项 卡 之 类 的 导航 模式 。 
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1-27 WebOS 系统 下 的 Facebook 和 Android 系统 下 的 Walmart 


1.2 ”次 级 导航 模式 

本 章 不 仅 只 包括 一 些 莱 单 类 型 的 导航 ， 还 将 介绍 一 些 其 他 导航 模式 。 所 谓 的 次 
级 导航 (Secondary Navigation) 是 指 那些 位 于 某 个 页 面 或 是 模块 内 的 导航 。 例 
a, ANZ 应 用 中 的 跳板 式 导 航 就 是 主要 的 选项 卡 式 导航 的 次 级 导航 。 同 样 ， 在 
Jamie Oliver's Recipes 应 用 中 ， 列 表 菜 单 是 主要 的 选项 卡 式 导航 的 次 级 导航 ( 见 
图 1-28 ) 。 
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1-28 主要 导航 : 选项 卡 式 , 次 级 导航 : 跳板 式 〈 左 图 )。 主 要 导航 : 选项 卡 式 , 次 级 导航 : 
IRA C658) 


所 有 的 主要 导航 模式 都 可 以 用 作 次 级 导航 。 我 们 经 第 能 够 看 到 选项 卡 下 再 用 选项 卡 
导航 、 选 项 卡 下 用 列表 导航 、 选 项 卡 下 采用 仪表 式 导 航 、 跳 板式 导航 下 采用 陈列 馆 
式 导航 等 情况 CULE 1-29), 
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1-29 主要 导航 : 选项 卡 式 , 次 级 导航 : 仪表 式 ( 左 图 )。 主 要 导航 : AMER, 次 级 导航 : 
ARFA (OB) 


还 有 一 些 其 他 的 导航 模式 也 可 作为 次 级 导航 ， 但 不 太 适 合用 作 主 要 导航 〈 见 图 1-30). 
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1.2.1 页 面 轮 盘 式 

通过 这 种 导航 模式 ， 操 作者 可 利用 “请 动 ”操作 快速 浏览 一 系列 离散 的 页 面 。 页 面 
tzr (Page Indicator, iOS 中 的 术语 ， 指 用 来 表示 页 面 数量 的 小 点 ) 可 以 显示 出 
导航 中 的 页 面 数量 ; 执行 “ 背 动 ”操作 可 以 显示 下 一 页 。 1-31 和 图 1-32 中 的 4 
个 例子 都 是 基 个 已 选中 选项 卡 (Tab) 中 的 页 面 轮 盘 导航 。 


ullO2-UK ^ P iPod 全 10:29 AM um 


"m 


Search 


1-31 Nigella Quick Collection 和 Zappos 应 用 


june 5, 2011: ©: @ Bl @, i) @ 2:09 em 
C 


gaange 09 UH 3:53 pm 


YAHOO! FINANCE 


TECH TICKER 


TOP STORIES 


Motorola Droid 3 leaks out in tutorial vids, 
confirms 8MP camera and 1080p .… 


THE | DAILY TICKER 
LATEST POSTS 


Car Czar: Auto Bailouts a “Great 
Deal” for Taxpayers, Govt. Should... 


Motorola Droid 3 leaks out in 
tutorial vids, confirms 8MP cam... 


The government has reached a deal with Fiat 
to sell its remaining 6% stake in Chrysler for 


$500 million and is preparing to unload its Droid X2 review 


SIM Play video View article 


1-32 Yahoo! Finance 和 IMobile 应 用 


页 面 轮 盘 式 导 航 有 一 定 的 局 限 性 。 如 果 页 面 超过 8 个 ， 最 好 考虑 使 用 列表 菜单 式 导 
航 ( 见 图 1-33), 
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页 面 轮 盘 式 导 航 可 以 很 好 地 实现 少量 页 面 的 导航 。 利 用 直观 的 指示 絮 来 表 
明 总 屏 数 和 当前 所 处 的 位 置 。 页 面 轮 盘 式 导 航 通 常用 “ 背 动 ”动作 实现 


1.2.2 图 片 轮 盘 式 

图 片 轮 盘 式 导航 类 似 于 一 个 二 维 轮 盘 ， 或 者 说 更 像 是 iTunes 的 Cover Flow 导航 。 
IMDB 用 图 斤 轮 盘 式 导航 显示 观看 次 数 最 多 的 电影 。 在 为 Adobe Flex Showcase ix 
计 的 零售 应 用 中 ， 作 者 也 使 用 这 种 导航 来 展示 特色 产品 (LA 1-34), 
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CE 1: 通过 唱片 封面 形象 化 地 翻 查 数字 化 音乐 数据 库 的 三 维 图 形 用 户 界面 。( 译 者 注 ) 
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Photo Cookbook 应 用 也 使 用 了 图 片 轮 盘 式 导 航 。 这 个 应 用 根据 食材 类 型 分 儿 列 显示 
产品 图 片 ( 见 图 1-35), 
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; chocolate 
drizzle squares 


1-35 Photo Cookbook 应 用 


Tap'n'Scrap 同时 应 用 了 以 上 两 种 风格 的 图 片 轮 盘 式 导 航 ( 见 图 1-36)。 通 过 二 维 轮 
盘 式 的 旋转 可 以 选择 它 的 背景 和 框架 ,剪贴 济 则 使 用 了 Cover Flow 的 旋转 风格 。 


Edit Scrapbook 


Choose Background Paper 


1-36 Tap’n’Scrap 应 用 


ANZ 的 银行 业务 应 用 利用 Cover Flow 式 的 导航 显示 账户 信息 和 支付 源 ( 见 图 1-37). 


在 演示 版 本 中 ， 这 种 方式 行 之 有 效 ， 也 非 第 有 了 吸 引力 ， 在 银行 卡 之 间 背 动手 指 让 人 
无 比 兴 和 理 ， 只 要 使 用 几 次 之 后 就 会 觉得 支付 过 程 非常 简单 。 


ANZ Advantage Account 
$1,002.73 


Dominic Citizen 
0123 456 789 


ANZ Everyday Visa Debit 


ivallable Funda: $2,522.98 


| Your Name Annabelle 


1-37. ANZ 中 的 图 片 轮 盘 式 导 航 在 选择 支付 卡 时 非常 有 效 ， 但 很 快 就 过 时 了 


Va 


图 片 轮 盘 式 导 航 能 很 好 地 显示 清新 悦目 内 容 ， 如 艺术 品 、 产 品 或 照片 等 。 
, 无 论 是 使 用 第 头 、 部 分 图 片 内 容 或 是 页 面 指示 融 (点 )， 它 都 能 提供 民 好 的 


视觉 化 功能 可 见 性 ， 以 此 告知 用 户 有 更 多 的 内 容 可 以 访问 。 


1.2.3 扩展 列表 式 

扩展 列表 式 导 航 通过 下 拉 屏 幕 显示 更 多 的 信息 。Gingerbread 版 本 的 Android 系统 在 
通话 记录 (Call Log) 中 就 使 用 了 这 种 导航 模式 。 所 有 来 自 同一 号码 的 来 电 都 被 压 
缩 显 示 在 一 行 中 ， 点 击 图 标 可 以 扩展 列表 来 显示 各 个 通话 记录 〈 见 图 1-38)。 


这 种 导航 模式 多 见于 网 站 的 移动 版 本 ， 移 动 应 用 中 使 用 较 少 ， 但 在 这 两 种 情况 下 都 
能 很 好 地 工作 。 以 gap.com 网 站 的 移动 版 为 例 ， 扩 展 列表 式 导 航 代 蔡 了 传统 网 站 上 
的 级 联 式 列表 ， 用 来 显示 所 有 女装 类 型 ( 见 图 1-39)。 
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Home 


Home 


eo Home 


Home 


Voicemail 


Call log 


Home 


Home 
@ Home 
rome 


Home 


Home 


Home 
Home 


Voicemail 


1-38 Android 系统 的 通话 记录 模块 


iPod © 3, 6:25 PM 


me iPod > 3 6:25 PM —: 


Women 


Body 


Maternity 


Men 


一 - 


Women 一 - 
k Outerwear > 


Sweaters > 
Shirts & Blouses > 
Ts & Tops > 
Jeans > 


Pants > 


1-39 Gap 网 站 的 移动 版 
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vB 2 SS 


表单 


Checkovt 


sp P^ otal $000 »; uy 
Shipping address Se 
sp P of ag 
posi Payment method 
«pr U^ r 
a — 
Te 
v 
Ma 


常见 表单 模式 : 登录 表单 (Sign In)、 注 册 表 单 (Registration)、 核 对 表单 (Checkout), 
计算 表单 (Calculate )、 搜 索 表 单 (Search Criteria) 、 多 步骤 表单 (Multi-step)、 长 
表单 (Long Form), 


大 部 分 网 络 应 用 程序 都 依靠 表单 实现 数据 和 输入 或 布局 。 虽 然 我 们 已 探讨 过 基本 表单 
的 设计 ， 并 提出 了 一 些 设计 策略 ， 但 网 络 上 仍 到 处 充斥 着 糟糕 的 表单 。 大 部 分 时 候 ， 
我 们 都 别 无 选择 ， 只 有 在 其 中 摸 扑 深 打 ， 历 尽 艰 全 才能 购买 物品 、 癌 应 用 程序 提交 
数据 或 是 回答 调查 问卷 (LE 2-1)。 


BREATH 
ORARIT A 
昌 忒 他 住所 (勤务 先 丰 点 ) [二 送 付 才 名 


图 现 住所 以 外 中 资料 送 付 先 住所 
Ke (RF) 


m 


例 ) 265 XB 


m 


KZ (20217) ‘2845 例 ) AEX HOD 


过 
+ 


GERD £4) 000-0000 


R ‘GIRL CF ln ie) 
区 都 | JEIRU TEE HJ 


例 ) 银座 7-3-5 


m 


例 ) DbOVYYav203 828 


| 


GERD 


GERD 


4 smt um 
am A 
m LÀ 
E an 
m 


RA 


2-1 ”这 个 表单 包含 有 很 多 惹眼 的 视觉 化 元 素 ， 妨 得 了 用 户 对 表单 所 提问 题 的 理解 。 来 目 
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media’ 


TE 1: 本 书 中 文 版 为 《Web 表单 设计 : 点 石 成 金 的 艺术 》， 已 于 2010 年 由 清华 大 学 出 版 社 出 版 发 行 。 
( 译 者 往 ) 
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锋 小 的 屏 莫 尺寸 和 受 限 的 输入 设备 都 让 设计 出 优秀 的 移动 表单 举步维艰 。 在 设计 任 
何 表单 之 前 ， 我 强烈 建议 读者 先 阅 读 以 下 资料 打 好 基础 。 


Web Form Design: Filling in the Blanks, Luke Wroblewski # (由 Rosenthal Media 出 版 ) 


Forms on Mobile Devices: Modern Solutions, Luke Wroblewski # (出 自 Smashing 
Magazine 网 站 ) ^ 


Mobile Form Design Strategies, Chui Chui Tan 著 (出 自 UX Booth 网 站 ) ? 


2-2 中 的 表单 设计 模式 可 以 作为 这 些 书籍 和 文章 的 补充 。 


e 5 fs 
Sign In Regster Checkout 
Pr arm mated tox £001 
"d Total $000 
Sgn In - 
Regster Forgo Password? Register Input 
Ships; id 
Payment method 
Place Order Calculate 
Searth TiHe 
nreno | 
Pa: 
Show 100 Results — Submit 
搜索 表单 多 步骤 表单 长 表单 


2-2 USE 


注 2: ZB) http://www.smashingmagazine.com/2010/03/1 1/forms-on-mobile-devices-modern-solutions/, (i#477£ ) 
TE 3: 参见 http://www.uxbooth.com/blog/mobile-form-design-strategies/, (VETE) 


4c^- 
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2.1 登录 表单 


登录 表单 应 该 只 包括 少量 的 信息 输入 : 用 户 名 、 密 码 、 操 作 按钮 、 密 码 帮 助 、 注 册 
选项 等 。 有 些 应 用 将 这 些 信息 输入 框 设计 在 一 屏 内 显示 ， 如 Photobucket 和 Groupon 
( 见 图 2-3), 


9:27 PM j; 8:14 PM 


felalelneleltle cin Signin Sign Up 


Login to upload and manage your albums. 


Login 


Forgot Username or Password 


Join Now. It's Free! 


n 


a All information will be sent over a secure connection. 
My Albums 


2-3 Photobucket 和 Groupon 应 用 


另外 一 些 应 用 ， 如 Kik 和 Springpad 则 首先 显示 “登录 ”或 “注册 ”选项 ， 然 
后 根据 用 户 的 选择 将 其 导向 相应 的 表单 。Springpad 和 Groupon 还 允许 用 户 使 用 
Facebook 或 其 他 账号 登录 (JILA 2-4) , 


有 一 种 登录 表单 直接 抛弃 了 用 户 名 输入 框 ， 只 要 求 用 户 输入 密码 。 在 安装 应 用 时 ， 
用 户 就 已 经 具备 了 使 用 权限 ， 只 要 再 输入 密码 就 可 以 访问 敏感 数据 了 。 这 种 形式 多 
见于 金融 领域 的 应 用 ， 如 图 2-5 所 示 的 PNC 的 Virtual Wallet， 但 也 适用 于 其 他 行 
业 。 把 移动 设备 的 PIN (Personal Identification Number， 个 人 识别 码 ) 作为 密码 能 
实现 同样 的 效果 。 
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8:21 PM 


Welcome to Kik 
New to Kik? Springpa UA 


Create New Account 


8:27 PM (m) 


Already have a Kik account? Login Register 


Log In 


Or you can log in with: 


Springpad saves the things you want to - 
remember on the web and on your phone. 
Notes, tasks, lists, wines, recipes and more. 
Scan barcodes, take photos, search nearby 
places. Syncs with http:;//springpadit.com - 


2-4 Kik 和 Springpad 应 用 


iPod > 10:32 PM [ 


( | Virtual Wallet. 


limi o 1] 


PNC.com 


2-5 PNC 的 VirualWallet 应 用 
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J 不 要 自己 “独创 ”登录 表单 ， 采 用 常见 的 设计 方案 ， 这 样 更 易于 用 户 登 录 。 
. 提供 取 回 已 忘记 密码 的 方式 。 


2.2 ”注册 表单 
注册 表单 与 登录 表单 一 样 ， 应 该 只 BRP REHSTES EA e Chui Chui Tan 建议 应 该 宣 


不 留情 地 砍 掉 那些 “不 带 有 任何 重要 功能 的 元 素 "。 这 意味 着 要 请 除 掉 那些 元 余 的 输 
入 框 ， 比 如 再 次 确认 E-mail 和 密码 (ULI 2-6), 


BEBO a ‘Gh H 1:51 PM 


六 
( Back 
M | 


Have a Facebook account? 


. a i f Sign Up with Facebook 
theresaneil& gmail.com 


GOWALLA WILL NEVER POST TO YOUR 
ACCOUNT WITHOUT YOUR PERMISSION 


= or -— 


Sign Up Now! First name 


Last name 


* | Email 


Password 


2-6 PageOnce 和 Gowalla 应 用 


注册 表单 有 可 能 是 你 为 应 用 设计 的 第 一 个 表单 ， 所 以 设计 的 标签 应 当 易于 陪读 。 不 
要 把 标签 和 输入 框 水 平 排列 ， 而 应 该 采用 垂直 排列 的 方式 ， 如 Evernote 应 用 的 设 
计 ， 或 使 用 水 印 式 标签 ， 如 Intuit 应 用 的 设计 (E 2-7 和 图 2-8 ) 。 
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B OBAME nom 


X Jeffrey-Spencer... - 


Walkthrough On Apr-5-2011 | First Name Theresa 


date Tue Apr 5/2011 Last Name Neil 


Card Number 


start time 8:07 AM 


Expiration Y) Ea 
end time ... 
CVV/CVN n 
Subject Subjec v 
Billing Address 


Grade Le... M 


Street Line 1 


Street Line 2 


Ci 
Jeffrey-Spencer Elementary = 
; ———— Sfásbama v) 
> Upload... f v 
区 Uploa TOG Postal Code 
图 2-7 ”水 平 排列 的 标签 尾 端 会 被 截断 显示 
xm Bow BAAM 1:54» iPod = 8:19 PM 
Back Sign U 
Create a Free Account as 3 p 
Enter your contact information: 
Password | 
Birth Year 
Create a password to securely access 
GoPayment in the future 
PB 
Gender 
A Male A Female | 
INTUIT 
图 2-8 垂直 排列 的 标签 和 水 印 标签 
36 | #22 


e LB RENI a SN 
反馈 ( 见 图 2-9)。 更 多 设计 技巧 ， 参 见 第 SE, 


iPod 4 8:22 PM LU GD B A HI 12-010 


Your Name Register Register 


Pick a unique username that will 
identify you on Kik. 


Pick a unique username that will 
identify you on Kik 


th Checking Availability... 


TULLE 5s. 


图 2-9 Kik 应 用 以 内 联 方式 显示 不 可 用 用 户 名 的 反馈 信息 


P 注册 界面 应 该 简 洗 明了 ， 最 好 在 一 屏 内 显示 完 所 有 要 填 的 信息 ， 注 册 按 钮 
s 应 该 显示 在 同一 屏幕 内 。 确 保 已 注册 用 户 能 很 容易 地 登录 。 


2.3 核对 表单 


与 使 用 应 用 程序 核对 信息 相 比 ， 更 常见 的 方式 古 通 过 专门 为 移动 设备 优化 后 的 网 站 
核对 信息 ， 但 两 者 的 设计 原则 是 相通 的 。 


在 核对 表单 中 使 用 设备 的 标准 控制 方法 。 


把 多 屏 信 息 合 并 到 一 个 核对 表单 中 。 诸 如 Zappos 和 Apple 之 类 的 零 — 
了 一 个 较 短 、 包 含 几 部 分 信息 的 核对 表单 ， 用 户 可 以 单独 核对 每 一 部 分 的 信息 CUL 


表单 | 37 


2-11)。 其 他 零售 商 ， 如 Target 和 Gilt 则 使 用 长 表单 来 核对 信息 。 
提供 快速 核对 机 制 ， 比 如 核对 已 存储 的 名 片 信息 ， 或 通过 登录 核对 信息 。 
在 标题 处 显示 安全 锁 来 向 用 户 表 明 当 前 连接 是 安全 的 。 


fa Eme, Au] 2-10 所 示 的 Home Depot 的 设计 ,不 一 定 就 是 最 快 、 最 有 效 的 
方法 。 更 好 的 设计 参见 多 步骤 表单 。 


SHIPPING ADDRESS Help 


Step 2: Step 3: Step 4: 
Shipping Shipping Payment Order 
Address Method & Summary Confirmation 


“First Name 


“Last Name 


“Address 1 


*Select a State | v 


会 E. EE » 


Home Shop Toolbox Videos 


2-10 Home Depot 的 信息 核对 向 导 是 移动 应 用 的 次 最 优 设计 


iPod = 6:00 PM ES iPod 全 10:32 AM m 


Cancel Checkout CHECKOUT 

‘ | Shipping Speed 
iPad Smart Cover - $39.00 Standard Shipping (4-5 business days) > 
Polyurethane - Blue $0.00 


Ships: within 24 hours 
Delivers Apr 5 - Apr 8 


Shipping Address 


summary Cart Subtotal $39.00 CIR UL > 
Free Shipping $0.00 
Estimated Tax $3.12 Payment Information 
Order Total $42.12 Please select a payment type. > 
shipping Standard Shipping 
SUBTOTAL (1 ITEM): $40.00 
inni Mal STANDARD GROUND SHIPPING: $0.00 
sa mk Theresa Neil > S556 
— | DISCOUNTS: $0.00 
payment > GRAND TOTAL: $40.00 


By clicking Place Order, you accept and agree to all SUBMIT MY ORDER 
terms of Apple's Sales & Refund Policy and Apple's 


Privacy Policy 


— 


| Help | | Contact Us | 


2-11 核对 表单 : Apple 和 Zappos 应 用 


Ya 


把 提升 速度 、 效 率 和 证 用 户 放心 作为 设计 目标 。 去 掉 不 必要 的 输入 域 ， 减 
少 页 面 和 操作 步骤 。 


2.4 计算 表单 


计算 袁 类 的 应 用 ， 例 如 体重 跟踪 、 税 款 预 估 以 及 贷款 计算 右 ， 需 要 输入 信息 。 虽 然 
这 些 表 单 可 以 采用 常见 的 操作 和 布局 方式 ， 但 也 不 能 忽视 可 读 性 方面 的 基本 设计 原 
Wl] (LAI 2-12)。 

对 齐 方 式 、 标 签 、 字 体 、 按 钮 位 置 、 数 据 比 较 方式 、 色 彩 搭配 等 所 有 方面 都 影响 着 


移动 表单 的 可 用 性 。 例 如 ，Valspar Paint Calculator 应 用 的 输入 域 和 标签 排列 方式 就 
韭 常 合适 ， 它 的 可 读 性 比 Behr Paint Calculator 应 用 的 要 好 很 多 (OLA 2-13 ) 。 
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CardioTrainer 
NS previous | My Goal Next > 


My weight goal is 


MONDAY, APRIL 4, 2011 


in 10 weeks 十 


End date: Dec. 17 


j 


0.50 pound(s) per week 
0 0.5 1.0 TS 2.0 
Ambitious goal, average risk of failure. i 


2-12 常见 控制 方式 : CardioTrainer 和 WeightBot 应 用 


iPod 全 9:18 PM 
Back valspar paint" sack Paint Calculator 


Select Measurements Units 


Enter the details of the room you wish to paint. 


Swee Medium, Large |, Custom 
small medium large 


or enter your room dimensions Room Length Doors [ 4/1 
ha | l 
Length of Room 0 ft Room Width Windows ap 


plan a project 


Interior Calculator 


Select a room size 


pe = oe No 
eight of Room 

et Need Touch Up Paint? | Yes | No 
# of doors 0 | 
# of windows 0 Calculate 


Cancel Calculate 


&J2-13 Valspar Paint 应 用 ， 吻 于 阅读 ; Behr Paint 应 用 ， 难 以 阅读 


最 好 的 计算 应 用 应 该 把 输入 数据 和 视觉 化 结果 紧密 关联 。TaxCaster FA Ml 5 (as tl wt 
化 地 显示 应 纳税 额 和 应 退税 额 ，HypoCalc 为 表单 配备 了 图 形 显示 (LA 2-14). 


iPod = 1:29 PM mm) 


Total ncome Your Pay & Withhol... 


About HypoCalc 


$177,234.74 
Details 


$59,243.03 
$16,148.85 
Your Refund: $0 


Good Market Average Market Bad Market 
3 a 


Investment Amount $40,000.00 


Your Taxable Wages 
0 3150k 
[ L l a 


Your Federal Tax Withholding Investment Period 


0 $35k 
LS i L [| 


Annual Return 


Your State Withholding 
0 
- Standard Devitation 


Your Unemployment Compensation 


"V d We recommend: 


O TurboTax. TurboTax Online Free Edition 


Initial Charge 


SAVE LOAD SEND 


2-14 TaxCaster 和 HypoCalc 应 用 
^ 使 用 标准 的 表单 设计 和 布局 原则 。 如 果 可 以 ， 在 同一 页 面 内 显示 计算 结果 ， 
位 置 尽量 明显 。 


2.5 搜索 表单 


某 些 搜索 功能 要 求 用 户 输入 多 个 约束 条 件 或 标准 ， 才 能 找 出 搜索 结果 。 与 其 他 表 
单 模式 一 样 ， 搜 索 表 单 也 应 该 只 包括 必要 的 输入 项 ， 并 提供 合理 的 默认 值 。 例 如 ， 
Kayak 应 用 的 飞机 航班 搜索 表单 默认 选项 是 ， 为 一 位 乘客 搜索 往返 的 经 谤 舱 机 票 。 
该 应 用 采用 了 稍 见 的 表单 布局 方式 ， 把 所 有 的 搜索 条 件 和 搜索 按钮 亚 示 在 一 个 屏幕 
Al. OpenTable 应 用 默认 定位 到 用 户 当 前 位 置 、 当 前 日 期 ， 搜 索 用 户 马 上 就 可 以 预 
定 的 餐馆 ( 见 图 2-15)。 
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10:28 PM 


Flights 


Round-trip 


i mo € © B A Hl C 4:27 om 


Find a Table 


LOCATION 


Current Location 


9 


DATE & TIME 
^ Austin, TX - Austin... — Los Angeles, CA Sat, Jun 4, 2011 | 7:00PM | 
DEPART RETURN PARTY SIZE 
MON WED 
图 21 wed >? E - 
MAX RESULTS 


Economy > 


40 60 80 100 


Find a Table 


Search Flights 


2-15 Kayak 和 Open Table 应 用 


Edmunds 的 Car Research 和 New Car Inventory 模块 的 搜索 功能 都 在 单 页 内 显示 ， 并 
且 都 在 搜索 完成 之 前 动态 显示 了 匹配 搜索 条 件 的 结 末 ( 见 图 2-16). 


5:36 PM 5:36 PM 


edmunds 


New Car Inventory 


Make/Model 
Vehicle Type 
Price Range 


Feature 


Location 


È 


Research 


ect search criteria 


Any > 
Any > 
Any > 
Any > 
78619 / 350 miles > 


-一 一 一 
Reset 


Make/Model 
Year 
Exterior Color 


Engine Type 


Price Range 


Location 


Show 544 Matches 


MINI 
Any 
Select Model 
Any > 
Any > 
78619 / 350 miles > 


E 
Reset 


Inventory 


2-16 Edmunds 8j New Car Research 和 New Car Inventory 模块 


Trulia 和 REALTOR.com 提供 了 相似 的 搜索 表单 ， 但 Trulia 的 界面 更 容易 操作 ， 也 
比 显 示 数 十 个 输入 域 的 REALTOR.com 更 具 亲 和 力 ( 见 图 2-17)。 


od = | X = 5:20 PM [ > 
Current Location 


vancel New Search Search 
For Sale For Rent | For Sale For Rent MLS ID 
Price range Min - Max > Location 
Property type All Types > City, State / ZIP / Address > 
Beds 0+ Nearby Areas None 
So 
Baths 0+ Basics 
eal Price Any 
Square footage 0+ ROM A E a CE S S Na 
Open house Price reduced li oom omn aR omm di 
OFF OFF 


Preview This Search 


Cancel Reset 


Search Now 


2-17 Trulia 的 精确 搜索 表单 和 REALTOR.com 的 长 表单 


不 要 让 太 多 的 搜索 选项 吓 到 用 户 ， 把 搜索 条 件 控制 在 一 页 之 内 。 采 用 能 够 
通过 手指 ， 方 便 且 快速 操作 的 控制 方式 。 


2.6 ”多 步骤 表单 


移动 设备 的 屏幕 较 小 ， 没 有 足够 的 物理 空间 ， 无 法 像 网 络 应 用 那样 显示 腾 肿 的 多 步 
又 表单 操作 向 导 。 一 个 人 简便 的 解决 办 法 症 ， 像 Fring 应 用 的 注册 流程 一 样 ， 显 示 当 
前 操作 步骤 和 总 步骤 数 〈( 见 图 2-18)。 


如 果 操 作 流 程 很 长 ， 就 多 加 几 个 步 又 表单 。 产 品 配置 颖 ， 如 Chipotle 的 在 线 订 购 模块 
和 Starbucks 的 饮料 创建 模块 ， 利 用 上 一 步 和 下 一 步 按钮 来 引导 用 户 ( 见 图 2-19)。 但 
这 种 方式 忽略 了 导航 设计 的 基本 可 用 性 原则 : 让 用 户 知 道 自己 在 哪里 ， 将 要 往 哪 里 
去 (也 就 是 位 于 第 x 步 ， 总 步 数 为 y 步 )。 清 晰 的 导航 对 移动 表单 尤为 重要 ， 因 为 用 
户 使 用 移动 设备 时 被 打 断 或 走神 的 概率 更 高 。 


表单 | 43 


Create Account 1 of 2 Create Profile 2 of 2 


fring! Free video calls, calls & chats Create your fring profile 
from your mobile. 


Add photo 
User-ID and Password must contain between 
4-15 letters & numbers. User-ID must start - 
with a letter. Vv | I agree to receive priodical updates 


w Allow fring to look trough my address 
—* — book & add friends 


— 


10:38 AM iPod = -5 1:10 AM 


Fill it Drink Detail Drink Size 


Rice 


Fajitas 
$ 


Pinto Beans 
$ 


© 1x Black Beans 
$ 


Salsa 


Fresh Tomato (mild) 
: © 


Roasted Chili-... 


Drinks 


2-19 Chipotle 和 Starbucks 应 用 


TurboTax 的 SnapTax 应 用 是 个 不 错 的 设计 ， 它 在 一 个 页 面 内 显示 所 有 步骤 和 提交 按 
钮 〈 见 图 2-20)。 用 户 可 以 进入 每 个 步 又 完成 操作 。 这 种 单 页 显示 的 方式 提供 了 极 


具 价 值 的 导航 信 Fi ( 整 
交 表 单 前 需要 付出 双 倍 的 努力 才能 检查 


& A LEE EJ socialis 


还 有 2 步 需要 完成 )， 
给 出 的 简要 总 结 。 


但 使 得 用 户 在 提 


iPod = 2:14 PM 


TurboTax 7 SnapTax 


Fed Refund 


$O 


Tax Forms 
0 forms added 


Tax Forms 


Income From a Job (W-2) 


© add new W-2 


Interest Income (1099-INT) 


Q3) add new 1099-INT 


A My Info 


) not visited 


Unemployment Income (1099-G) 


中 add new 1099-G 


Preview 
not visited 


© 


2-20 TurboTax 的 Snap Tax 应 用 


Square Jv HERAK Ja ios SRA GERIT) 


和 用 户 当 前 所 在 的 步 又 ( 见 图 2-21). 


| Purchase & File | 


Student Loan Interest (1098-E) 


中 add new 1098-E 


Other Forms 


PERE tan Ae. Dll uh SRB 


iPod 到 3 6:57 PM 
Enter Information 


= 


Cancel 


Accept Card Payments 


Before you can accept card payments, 
Square has to collect some information. 


Are you an individual or a business? 


6:58 PM 


Confirm Information 
cM 


= — MÀ 
i — — 
IT identity Information S= 
Theresa Neil 
xxx-xx-8985 
March 9, 1977 
18201 Fm 150 W 


Driftwood, TX 78619 


Confirm Information 


If the above information is accurate, we will 
ask three questions to verify your identity. 


first name | Theresa 
lastname | Neil 
Å 
4 a 
phone (000) 000-0000 
iN 
^x 
| addanan Cetrant AAArace 


4 Continue 


2-21 Square 应 用 的 安装 流程 


45 


告知 用 户 当 前 所 在 的 位 置 和 将 要 去 的 地 方 。 去 掉 不 必要 的 输入 域 ， 最 小 化 
页 和 面 和 操作 步 又 的 数量 。 


2.7 ”长 表单 


未 些 表 单 可 能 会 需要 滚动 屏幕 才能 训 览 完 。 长 表单 的 最 精妙 之 处 在 于 ， 它 用 命令 取 
代 了 按钮 。Zappos 和 Skype 都 在 iOS 版 本 的 应 用 中 采用 TMLee, 把 按钮 放 
在 了 标题 栏 内 ( 见 图 2-22), 


iPod = 10:32 AM = iPod 全 6:55 PM rm 

ADD PAYMENT ES Create Account 

CREDIT CARD INFORMATION: Full Name 
| Skype Name Requirec 

l 11] | | ] > 
| Password 
| Repeat 
xpiral )7 > P 
piration year ? Email 
BILLING ADDRESS: You must enter a valid email address in case 


you need to recover a lost password. 


Get news and offers ETE 


2-22 KRÆ: Zappos 和 Skype 应 用 


这 种 形式 在 其 他 操作 系统 中 都 是 非 标准 化 形式 ， 但 把 按钮 放 在 表单 的 底部 也 很 有 效 
( 见 图 2-23), 


沿用 最 好 的 表单 设计 经 验 ， 遵 循 特定 操作 系统 的 按钮 排列 顺序 和 排列 准则 。 
Discover Card 应 用 内 的 命令 按钮 和 取消 按钮 拥有 不 同 的 视 完 效 末 ， 但 在 iOS 系统 
中 的 顺序 却 错 了 。Sam’s Club 应 用 的 按钮 顺序 是 正确 的 ， 但 按钮 看 起 来 长 得 都 差 不 
多 ， 用 户 必 须 仔细 查 看 才能 作出 正确 的 选择 。 


28 50 E UG o» 


Checkout 
First Name Theresa 
Last Name Neil 
Listing Title Card Number 
1 MLE | “expiration [一同 [一同 


a$ 
LJ 


C ory 
v ww ww 9 9 Billing Address 


DA Sheek Ona 
9 Add Peres Service > (me an 


一 一 一 


Place Order 


2-23 eBay 的 长 列表 表单 和 Gilt 的 长 核对 表单 


12:28 PM 
UEM Your —" 
bile phone must accept text messages. 


* First Name 
Amount: 
Middle Initial 
0.00 Limit $200 a day, $500 th Fe o 
$ imi a day a mon V Fast Msi — 
You'll earn Cashback Bonus on this transaction! 
om CD 
| See ———— 1 À 
Transaction Type: * Membership # Membership + 


’ OTC" 
Friends or Family M * Zip Code l 


Free for you and recipient 


, Online Profile a 
Note to Recipient (optional): * E-mail Address l E-mail Address | 
* Password P ' 
* Confirm | firm I vord 


SEEN 
Continue Cancel ^ r 
| & 


My Account 


图 2-24 ”Discover， 设 计 良 好 但 顺序 错误 Sam’s Club, foaleilE Big el 


不 要 人 为 地 把 表单 划分 成 一 些 步 又 来 避免 屏 硕 的 滚动。 坚决 要 去 挥 那 些 不 
必要 的 输入 域 。 尊 人 循 特 定 操作 系统 中 按钮 布局 的 标准 。 


eB 3 = 


表格 和 列表 


常见 表格 模式 : 基本 表格 (Basic Table)、 无 表 头 表格 (Headerless Table), 417 
组 表格 (Grouped Row)、 固 定 列 表格 (Fixed Column)、 级 联 式 列表 (Cascading 
List) 、 可 编辑 表格 (Editable Table)、 带 有 视觉 指示 器 的 表格 (Tables with Visual 
Indicator). 、 带 有 内 容 总 览 和 数据 的 表格 (Overview plus Data) 等 。 


我 们 的 很 多 客户 都 有 企业 应 用 程序 或 是 耐用 且 高 产 的 工具 ， 这 些 程序 和 工具 通常 都 
包括 填 满 了 数据 的 表格 。 我 们 可 以 把 表格 认为 是 几 十 个 模 、 纵 向 滚动 的 数据 列 。 客 
户 想 知道 的 是 ， 我 们 是 如 何 把 这 些 表格 塞 进 他 们 的 移动 应 用 中 的 。 当 然 ， 我 们 并 没 
有 那么 做 ， 至 少 设 有 采用 设计 网 站 时 处 理 表 格 的 方式 。 然 而 ， 庆 和 镁 的 征 ， 移 动 设备 
为 我 们 带 来 了 一 个 机 会 ， 可 以 重新 评估 哪些 信息 最 为 重要 ， 需 要 将 其 显示 给 用 户 。 


例如 ， 对 于 一 个 很 长 ， 用 以 显示 学 生 测 试 成 绩 的 表格 而 言 ， 图 表 或 许 才 古 上 佳之 选 。 
这 样 你 就 能 从 所 有 学 生 中 找 出 那些 位 于 钟 形 曲 线 某 个 特定 区 域 的 学 生 〈 见 图 3-1)。 


2011 Test Scores 
Name Score | Test Date | 


Amy | 77 | 07/14/2011 | 

Bob 84 | 06/23/2011 

Chris | 95 | 07/14/2011 | 二 
Daniel | 80 | 06/23/2011 ] 2011 Test Scores alh -— 
Elza | 64 | 08/10/2011 | 

Frank 81 | 06/23/2011 | 

Gene | 92 | 06/23/2011 | 

Holly 67 | 07/14/2011 | 

| Ivan | 79 [07/14/2011 | 

Kristen | 83 | 06/23/2011 | 

Lois 99 | 06/23/2011 | 

Mandy 100 | 06/23/2011 


3-1 重新 设计 后 的 表格 
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我 们 还 设计 了 一 个 无 表 头 表格 ， 通 过 其 中 的 动态 搜索 功能 可 以 很 快 地 找 出 茶 个 学 生 
的 成 绩 ， 这 是 另外 一 种 显示 方式 ( 见 图 3-2). 


2011 Test Scores 2011 Test Scores 
Q start typing to search 


Amy Damien A- 
Test date: 08/10/2011 77 of 100 Test date: 08/10/2011 94 of 100 


Bob B- Damon 
Test date: 07/14/2011 84 of 100 Test date: 07/14/2011 78 of 100 


Chris A Daniel C 
Test date: 06/23/2011 95 of 100 Test date: 06/23/2011 80 of 100 


Daniel C Danny B+ 
Test date: 08/01/2011 80 of 100 Test date: 08/01/2011 93 of 100 


Eliza E Daphane 十 
Test date: 08/01/2011 64 of 100 Test date: 08/01/2011 99 of 100 


3-2 钟 形 曲线 图 表 的 另 一 种 钢 图 


如 采 你 已 经 确定 了 应 用 所 要 显示 的 关键 数据 ， 束 可 以 参考 图 3-3 中 的 表格 模式 寻找 
设计 灵感 。 


$300000 A 
LA AG ARK AH 行 分 组 表格 8x 5 E46 
| 

il 

il 

i 

i Ea 

i 

ii 

iJ 

ill 
带 有 内 容 总 览 和 数据 «RAN 带 有 视觉 指示 器 的 “可 编辑 表格 
(9 2.18 LAE 


3-3 FURER 


3.1 基本 表格 


这 是 表格 的 标准 模式 ， 其 中 的 列 数 据 有 固定 的 表 头 ， 表 格 至 网 格式 布局 。 为 表 内 的 
行 设 定 不 同 的 颜色 (这 种 形式 也 称 为 斑马 纹 )， 或 者 在 各 行 之 间 用 细 线 分 割 ， 都 能 提 
升 表格 的 可 读 性 (ILE 3-4)。 


iPod = 4:32 PM 


Back Product Analysis 
2009 Q4 Atlanta 


Subcategory Sales 


8" Video Equipment $17,557 Graphs Box score Plays CG 


[^g Cameras $14,921 Friday, August 14, 2009 


" BO PA H 2B 3B HR R RBI SB BB SO WPA 
A Soriano (LF) 
J Baker (1B-2B) 


Cy Tv's $14,200 


[B Audio Equipment $11,636 
K Hill (C) 


G Soto (PH) 
R Wells (P) 


Computers $7,644 


ss Science & 
Technology 


Pitcher 
R Wells (W) 
J Grabow 
E Caridad 


$3,181 


Rock 32,087 


3-4 MicroStrategy Mobile 和 FanGraphs Baseball 应 用 


fe Vs] SE. zs BJ AR A A ES. CADRE E ELA BERE LIS AER. TOR 
用 其 他 方式 。 


3.2 无 表 头 表格 


无 表 头 表格 的 特征 是 一 一 没有 列 标签 ， 用 较 宽 的 行 显示 某 一 对 象 的 多 项 信息 。 通 第 
的 做 法 是 ， 用 较 大 的 字号 显示 行 标记 ， 用 较 小 的 字号 显示 细 市 内 容 。realtor.com 网 
站 的 设计 显示 出 了 这 类 较 宽 的 行 可 容纳 内 容 的 极限 。 它 们 本 应 该 省 略 挥 见 余 的 住宅 
2&7" (Single Family 被 截断 显示 为 “Single..” 和 “Single Fam..”) 描述 ， 因 为 表格 
上 面 的 标题 已 明确 显示 了 这 一 信息 ( 见 图 3-5). 


£a 
3. 


不 要 使 用 暗色 的 网 格 线 和 垂直 分 割 方式 。 文 字 左 对 齐 ， 数 字 右 对 齐 。 一 屏 
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iPod = = 5:21 PM LN, 


Home Results (2235) Refine 


ga M @ 9:19 am 


e 


Bankof America ^2 Sign Out 
| 


2 NEP 


Accounts 


Austin, TX 
$200,000 to $450,000 | Single Family Homes... 


Bank Accounts 


112 Oak Glen Cv Lakeway, TX 
Interest Checking - 6523 


EP $450,000 | 3 Bed, 2.5 Bath Y $1,209.22 > 
M 2,314 Sq Ft | 6,098 Sq Ft Lot | Single... Available Balance 
G 10600 Leafwood Ln Austin, TX — Regular Savings - 7689 $3,232.17 > 


Available Balance 


Be $450,000 | 4 Bed, 2.5 Bath 
2,378 Sq Ft 2.16 Acres | Single Fam... 


BAC Corporate Card Business 
Visa - 2231 $1,221.96 k 


ji I 
ü Current Balance 
A 


4L. 1203 Holly St Austin, Tx 
$450,000 | 3 Bed, 2 Bath 
2.142 Sq Ft | 4,791 Sq Ft Lot | Single.. 


Money Market Savings - 7122 
| 901 Bermuda Lakeway, Tx Available Balance BE, /95.92. P 
$450,000 | 4 Bed, 3 Bath 


3,185 Sq Ft | 0.27 A Single Fam... 
4 e iota cun Bank of America Platinum Plus 


MasterCard - 6511 $232.33 F 


Current Balance 


29 312 Calistoga Ct Austin, Tx 
$450,000 | 5 Bed, 4 Bath 


Merrill Lynch Investment Accounts 
Map Satellite 
CMA-EDGE 1A1-87AB? £10223 46 M 


3-5 REALTOR.com 和 Bank of America 应 用 


这 种 表格 模式 非常 适合 用 来 显示 项 目 集 合 CE i, EHE. FASE) 和 这 些 项 
的 搜索 结果 。 与 列表 类 似 ， 这 种 形式 能 方便 用 户 快 速 浏 览 选 择 。 


每 一 宽 行 内 最 多 显示 三 行 信息 。 不 太 重 要 的 细 市 内 容 使 用 较 小 、 浅 色 的 字 
体 。 不 要 自己 猿 测 什么 信息 最 重要 ， 而 要 询问 客户 的 意见 ， 然 后 作出 行 之 
有 效 的 设计 。 


3.3 固定 列表 格 的 表格 


对 于 较 大 的 表格 ， 固 定 某 一 列 或 某 几 列 是 个 可 行 的 做 法 〈 见 图 3-6). LA Roambi 应 
用 为 例 ， 最 左边 的 一 列 固定 ， 其 他 列 深 动 显示 。Fidelity 应 用 则 同时 固定 了 屏幕 左边 
和 右边 的 列 ， 在 中 间 区 域 深 动 显示 内 容 ， 但 这 种 模式 比 Roambi 所 用 方案 难以 使 用 ， 
因为 用 户 可 以 执行 请 动 操 作 的 区 域 过 小 。 


邮 


ao fI PI AS «T EET 10:51AM 


Eid —— Log Out 


© Top 25 Accounts 


YTD Orders Number Discount 


Account of Ord... 


Airware 


Accounts. 


Alucal al $12,37 4g 36.00% INDIVIDUAL 


Aminfotel | $14,183 oe 6.00% $ 


Calscope 913,783 ae 36.00% As of 06/04/2011 01:46pm ET 


Comiom at ; 
Positions Balances Orders History P 


Conofarb 
Datacor Symbol Last Price Change 
Dataweb FNIXX 
Ensys al $13,238 26 39.00% NJ MUNICIP... 

io CVX (m) 
Genetion  HEURON v : "uc > 
iCineplexon CORP NEW 

-CWA 11061EC1..- 

iMotocar 212,046 EX CHEN %5 CALL "Y $ -$5. 00 > 
iRapitopia (CVX) CHEV... 
Jambancorp al $14,756 50 30.00% As of 06/04/2011 10:50am ET 


Pa uns Additional Important Information 


3-6 Roambi 40 Fidelity 应 用 (Pia KIAR 
ut 为 国定 的 列 设计 比较 醒目 的 样式 ， 以 提示 用 户 ， 滑 动 操作 能 浏览 更 多 的 
数据。 


NE 
nj 
> 1 
< 


3.4 ”市 有 内 容 总 览 和 数据 的 表格 


帘 有 内 容 总 上 和 数据 的 表格 模式 指 在 表格 各 数据 行 上 方 显 示 表 格 内 容 的 总 换 。 我 最 喜 
欢 的 网 络 应 用 程序 一 一 Discover 的 SpendAnalyzer 就 采用 了 这 种 模式 (UL 3-7). 


移动 应 用 ， 如 Bank of America 应 用 的 账户 页 面 中 ， 存 款 账 户 的 可 用 余额 (总 览 ) 

就 以 大 号 字体 在 账户 的 详细 信息 (数据) 上 方 显 示 。 在 另 一 个 NASDAQ.com 的 例 

Tn. PNE A pel ZE Ee E73, KERER DU V, ee PP dc ox fei EL AY [8] ET ach Be TEE E 
汇总 数据 〈 见 图 3-8). 


注 1: 参见 https://www.discover.com/credit-cards/member-benefits/spend-analyzer/, (EHIE) 
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All Category Spending: Oct 1-31, 2008 


ELM 3 mo. 6 mo. 12 mo. 24 mo. Year-to-Date Oct 1-31, 2008 | 4 


All Categories $1,090 


All Categories Spending History 


Avg. Spend 广 一 一 二 一 一 一 天 一 一 一 一 一 一 一 一 一 一 


Bi Merchandise/Retail $63 $0 u 


E Supermarkets $301 

: TOM ] Mar Apr May Jun Jul Aug Sep Oct 
E Medical Services $284 @ Gasoline $61 '08 '08 ‘08 '08 ‘08 ‘08 '08 '08 
B Services $229 @ Restaurants $57 ~ | 
E Automotive $95 a 


Avg. Monthly Spend (24 mo.) - - - $ 


D 
Year-to-Date Total $ 
Last 12 Months Total $ 14,827 
Last 24 Months Total $ 28 


Like what you see, but don't have a Discover Card? Apply Now > 


— Transactions Text Size ESI AJ|A 
Trans.Date 4 PostDate Description Amount X Category 
10/04/08 10/04/08 BP OIL $ 29.00 Gasoline ^ 
10/08/08 10/08/08 ALLSTATE INSURANCE $ 21.40 Services | | 
10/08/08 10/08/08 WALGREENS $ 38.00 Merchandise/Retail | 
10/10/08 10/10/08 BP OIL $ 32.00 Gasoline 
10/10/08 10/10/08 TURBO TIRE AND AUTO INC. $ 95.00 Automotive 
10/11/08 10/11/08 MEDSUPPLIES $ 90.00 Medical Services | 
10/15/08 10/15/08 WHOLEFOODS $ 124.00 Supermarkets 
10/16/08 10/16/08 DR. JULIUS HIBBERT $ 194.00 Medical Services 


3-7 Discover 网 站 的 SpendAnalyzer 


Portfolio 


Accounts Regular Savi. - Sign Out 
Available Balance 


$12,289.25 0 


Processing 
TRANSFER FROM ACCT #7164 ON $500.00 > 
02/14 VIA WEB 


02/10/2011 


$0.80 > 
Interest Earned 


02/09/2011 
Online scheduled transfer from CHK 51.11 2 
7164 Confirmation# 1135962700 


02/09/201 1 
Online scheduled transfer from CHK $1.11 > 


Portfolio 


Accounts 


3-8 Bank of America 和 QFolio 应 用 


Adobe 的 Site Catalyst 用 图 形 做 总 结 ， 但 图 例 信 息 难 以 辨认 ， 所 以 要 改进 饼 状 图 的 
设计 。Proofpoint 应 用 在 这 一 点 做 得 很 好 ， 它 为 图 例 加 上 了 数据 ( 见 图 3-9). 


X &T 3G 8:01 PM 


pee roofpointdemo_demo2 
JJ Esquire CSBU Demo usters e p 


一 Message Disposition 
Exit Pages 
Thu. 7 Oct. 2010 


Legend 


Messages Percentage 


Dashboards Clusters 
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表格 内 容 总 贤 应 该 显示 在 数据 上 方 ， 且 要 一 目 『 了 然 。 


3.5 ” 行 分 组 表格 


对 表格 的 行进 行 分 组 能 让 用 户 更 容易 地 了 解 表 格 内 的 数据 。 行 分 组 的 作用 类 似 于 各 
个 部 分 的 标题 ， 比 如 在 Mint 应 用 中 ， 交 易 记 录 按 照 日 期 进行 分 组 ( 见 图 3-10). 
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在 表格 中 为 内 容 总 结 行 设 定 与 其 他 行 不 同 的 视觉 效果 。 


3.6 级 联 式 列表 


很 明显 ， 在 手机 屏 奏 上 显示 树 形 表格 非 闸 及 烦 ， 级 联 式 列表 可 以 提供 同样 的 层级 结 
构 。Wine Spectator 中 的 级 联 式 列表 可 以 让 用 户 很 容易 地 在 酒 的 产地 、 类 型 和 年 份 
之 间 进 行 导航 ( 见 图 3-11)。 
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iOS Fh i RI Ft OR A REUS, Ese Ph ESAT POA BJ UI ZU. 
DropBox 应 用 在 名 为 DropBox 的 选项 卡 内 使 用 这 种 形式 作为 次 级 导航 (ILE 3-12). 
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使 用 较为 宽 谤 的 信息 结构 可 以 避免 在 应 用 内 产生 较 帝 的 


如 有 果 用 级 联 式 列表 来 导航 用 户 自 定义 的 信息 结构 ， 则 可 
多 界面 层次 。 


p RE te n 

3.7 ”市 有 视 锅 指示 器 的 表格 
火花 谱 线 (Sparkline) 和 图 标 能 提升 表格 的 信息 显示 效果 ， 可 以 让 用 户 更 容易 地 找 
到 自己 所 关注 的 内 容 。My Diet Calendar 用 带 有 颜色 的 箭头 来 显示 净 热 量 摄 取 高 于 
或 低 于 用 户 所 期 望 日 摄 入 量 的 情况 。Roambi 的 Sales by Store 模块 的 表格 用 火花 谱 
线 和 图 标 显 示 月 销售 量 和 销售 走势 ( 见 图 3-13). 
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更 多 关于 移动 应 用 中 火化 谱 线 的 内 容 ， 参 见 第 6 草 。 


使 用 那些 用 户 能 够 迅速 识别 的 视 完 化 指示 副 ， 去 挥 那些 不 必要 的 图 标 。 
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3.8 可 编辑 表格 


在 移动 应 用 界面 中 ， 可 编辑 表格 广泛 应 用 于 诸如 QuickOffice 之 类 的 电子 表格 软件 
( 见 图 3-14) 。 网 络 应 用 中 可 编辑 表格 的 很 多 设计 原则 都 可 用 于 移动 终端 的 界面 设计 : 
。 清晰 地 显示 出 当前 所 选择 的 单元 格 和 /或 行 ; 
。 如 果 单 元 格 有 特定 的 格式 ， 提 供 对 应 的 编辑 器 (UE ZS. UA HI, BC. 
wea, BALE as GG ) 5 
。 在 用 户 执行 保存 操作 时 显示 反馈 和 错误 信息 ， 而 不 是 在 更 改 表格 时 显示 。 
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3-14 Android 系统 下 的 QuickOffice 和 Windows 系统 下 的 SmartGrid 


与 网 络 应 用 不 同 的 是 ， 移 动 设备 上 的 可 编辑 表格 不 适合 用 来 输入 大 量 数 据 ， 因 为 大 
部 分 移动 设备 的 键盘 都 不 支持 键盘 导航 (尤其 是 基于 Tab 键 的 切换 操作 )。 


网 络 程序 和 桌面 应 用 程序 设计 之 间 的 权衡 为 可 编辑 表格 提供 了 丰富 的 可 参 
考 经 验 。 不 要 为 大 量 数 据 输入 使 用 可 编辑 表格 ， 当 需要 有 大 量 可 编辑 元 素 
时 ， 也 不 要 使 用 这 种 表格 模式 。 


op 4 = 


搜索 v 分 类 和 过 小 


S 


常见 模式 : 显 性 搜索 (Explicit Search) 、 目 动 补 全 搜索 (Auto-complete), 、 范 围 搜索 
(Scoped Search)、 保 存 搜索 记录 并 显示 最 近 搜 索 内 容 (Saved & Recent), 、 搜 索 标 准 
(RA) (Search Criteria (form))、 搜 索 结果 (Search Result)、 屏 内 分 类 (Onscreen 
Sort ) 、 A RTE AP A EF ot (Sort Order Selector), 472272" (Sort Form), BRA tye 
(Onscreen filter), tue zy (Filter Drawer), xlJEXHWfE (Filter Dialog). IWEK 
单 (Filter Form), 


MAAK, 4IRERT TEARS. 快速 地 翻阅 着 几 份 杂乱 的 报纸 时 ， 我 突然 

FARES, AERA MA a J^ us EE L 备 的 三 个 简单 特征 : fH. A EDU LUE 
来 查找 信息 的 。 

A el Gi dd i E 分 组 的 (如 卡车 、 面 包车 、SUV 
T), "LC 页 的 列表 列 出 所 售卖 的 产 
品 。 我 必须 陪读 报纸 上 的 每 一 条 ， 才 能 确定 是 否 有 人 正在 出 售 我 想 买 的 东西 。 
^, WII 我 会 使 用 手机 上 的 ase s List 应 用 。 

这 使 我 隐 入 了 思 芳 。 当 我 们 在 数字 世界 中 搜索 、 分 类 并 过 契 信 息 时 ， 移 动 应 用 中 总 
是 发 生 着 细微 的 变化 ， 来 帮 有 我 们 实现 这 些 操作 。 本 章 介 绍 一 些 在 移动 应 用 中 搜索 、 
分 类 并 过 让 信息 的 方法 。 


4.1 搜索 


Peter Morville 和 Jeffery Callendar 在 Search Patterns: Design for Discovery (O’Reilly 


搜索 、 分 类 和 过 滤 | 63 


出 版 社 2010 4E HK, http://shop.oreilly.com/product/9780596802288.do) “一 书 中 对 
搜索 的 设计 模式 作出 了 精彩 总 结 。 我 强烈 建议 读者 在 设计 搜索 界面 之 前 (无 论 是 为 
移动 设备 还 是 为 其 他 平台 )， 先 阅读 一 下 这 部 著作 。 


在 这 一 部 分 ， 我 将 介绍 一 些 移 动 应 用 的 搜索 模式 ( 见 图 4-1)。 


显 性 搜索 自动 补 爹 搜索 动态 搜索 范围 搜索 
Search 
ve arche 2 
PRE Show 100 Results Show More 
保存 搜索 记录 并 显示 最 近 REARS 搜索 结果 
搜索 内 容 


图 4-1 弟 见 搜索 模式 


41.1 显 性 搜索 

显 性 搜索 要 求 用 户 执 行 明显 的 搜索 操作 并 讲 览 搜索 结果 。 其 操作 方式 可 以 是 点 击 屏 
幕 上 的 搜索 按钮 ， 如 Walmart 的 设计 ( 见 图 4-2)， 或 是 按 下 键盘 上 的 搜索 键 ， 如 
Target 的 设计 ( 见 图 4-3)。 搜 索 结 末 通 常 显示 在 搜索 栏 下 方 。 建 议 为 显 性 搜索 搭配 


目 动 补 全 模式 .。 


注 1: 该 书 中 文 版 名 为 《搜索 模式 》，2010 年 由 电子 工业 出 版 社 出 版 发 行 。( 译 者 注 ) 
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图 4-3 Target， 载 入 并 显示 搜索 结果 
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在 输入 域 周围 提供 明显 的 操作 按钮 ， 并 提供 撤销 搜索 的 选项 。 通 过 反馈 告 
4. 知 用 户 ， 搜 索 动作 已 执行 (参见 第 8 F). 


41.2 BH Ef e ER 

或 许 网 络 应 用 和 移动 应 用 使 用 最 广泛 的 搜索 模式 就 是 自动 补 全 模式 。 用 户 输入 内 容 
时 程序 会 立刻 显示 出 一 系列 可 能 的 输入 结果 ， 只 要 通过 点 击 来 选择 某 一 项 ， 程 序 就 
会 执行 搜索 操作 。 另 外 一 种 情况 是 ， 用 户 持续 输入 内 容 ， 然 后 点 击 搜索 按钮 。 


理想 状况 下 ， 搜 索 结 果 将 立刻 显示 出 来 ， 但 要 使 用 进度 指示 颖 (搜索 中 …… ) 作为 
系统 的 反馈 。Netflix ( 见 图 4-4) 在 搜索 输入 域内 显示 了 一 个 指示 妖 ， 而 Fidelity 
( 见 图 4-5) 则 在 搜索 结果 显示 区 域内 设计 了 一 个 指示 絮 。 


Tripadvisor 应 用 采用 了 增强 的 自动 补 全 搜索 ， 把 搜索 结果 分 为 三 组 : 受 欢 迎 的 旅游 
目的 地 、 酒 店 和 餐馆 ( 见 图 4-6). 
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如 果 程 序 在 显示 搜索 结果 时 有 延迟 ， 就 要 给 出 一 些 反 馈 。 在 搜索 结果 中 突 
出 显示 用 户 输入 的 搜索 内 容 。 


4.1.3 动态 搜索 

这 种 模式 也 被 称 为 动态 过 滤 。 用 户 输 入 搜索 内 容 ， 程 序 将 动态 地 过 滤 屏 幕 上 的 数据 。 
在 BlackBerry 系统 下 的 App World 应 用 和 WebOS 系统 下 的 People 应 用 中 ， 用 户 输 
入 文字 ， 程 序 会 过 滤 屏 幕 上 列 出 的 内 容 项 (WE 4-7), 
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^ 对 于 有 限 的 数据 ， 如 地 址 薄 或 个 人 媒体 库 ， 这 种 搜索 模式 非常 有 效 ， 但 它 
不 太 适合 用 来 搜索 海量 数据 。 

4.1.4 HBR 

il. (EDS xmILBL HoE R RREME E. ER Re x F 

想 要 的 结果 。Google 和 Photobucket 使 用 了 不 同 的 设计 ， 却 达到 了 相同 的 搜索 效果 

(ULI 4-8), 
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AllRecipes MHE 70 VE HF (ETE 2018 BZ BEE PETE AR ART (SEES). Dropbox 
SUAS 80 A5 18 Ae A aA AS, BH P AE ERR A ZZ PT ARE 
Fal Se Ey RK EK (ULI 4-9), 
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4.1.5 ”保存 搜索 记录 并 显示 最 近 搜 索 内 容 

成 功 的 移动 应 用 界面 设计 都 遵循 基本 的 可 用 性 原则 ， 尊重 用户 的 劳动 成 果 。 保 存 搜 
索 记 录 并 显示 最 近 搜 索 内 容 的 设计 做 到 了 这 一 点 。 有 了 这 样 的 设计 ， 用 户 就 可 以 很 
容易 地 从 先前 的 搜索 内 容 中 进行 选择 ， 而 不 需要 再 次 输入 相同 的 关键 词 或 搜索 条 件 。 
eBay 和 蕴 果 iOS 都 保存 了 搜索 记录 ， 也 通过 显示 最 近 搜 索 内 容 来 提升 用 户 的 工作 
效率 (ULE 4-10), 
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其 他 尊重 用 户 劳 动 成 果 的 做 法 包括 基于 地 理 位 置 的 搜索 ， 如 Trulia 的 设计 ; 或 基于 
条 形 码 的 搜索 ， 如 Amazon 的 PriceCheck 应 用 ( 见 图 4-11), 


保存 搜索 记录 通 背 要 执行 额外 的 步骤 来 为 搜索 命名 ， 以 供 后 用 ， 显 示 最 近 
搜索 内 容 的 做 法 对 搜索 记录 的 保存 比较 模糊 ， 且 和 序 于 表面 。 你 应 该 考虑 哪 
i Sec BE TBE FA P mc 


9:10 AM 


Current Location [ Q Type! j 


78619 


Tap one of the four methods above 


to check prices and purchase items 
from Amazon.com and Amazon 


A s D n G H J K L sellers, all covered by the 
P3 fA m iG B N M Px Amazon.com A-to-z Guarantee. 
.2123 space Search 


4-11 Trulia 和 Amazon 的 PriceCheck 应 用 


41.6 ”搜索 表单 

这 种 搜索 模式 的 特征 是 ， 在 一 个 独立 表单 内 输入 多 项 搜索 条 件 和 一 个 显 性 的 搜索 
tHo Kayak 和 Whole Foods 都 用 搜索 表单 来 收集 搜索 航班 和 酒店 所 需 的 条 件 (L 
图 4-12 和 图 4-13) 。 更 多 例子 ， 参 见 第 2 ee, 
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4-13 Whole Foods 应 用 的 Recipe Search 模块 


Va, 


Rt a> dg A BR Bae. ARE EER TE ZR Se EE ST A Pe ttl], BSG ie 
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4.1.7 搜索 结果 /浏览 结果 

只 要 执行 了 搜索 操作 ， 那 么 就 要 在 同一 屏 内 显示 搜索 结果 ， 或 在 专用 的 屏幕 内 显示 。 
搜索 结果 可 以 显示 为 表格 或 列表 ， 也 可 以 在 地 图 或 卫星 上 显示 ， 或 者 显示 为 缩 略 图 。 
根据 搜索 结果 的 类 型 和 用 户 使 用 偏好 提供 多 种 视图 ( 见 图 4-14 和 图 4-15)。 
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11:57 AM 
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E Featured Q 
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E] 4-15 在 地 图 上 显示 搜索 结果 和 显示 搜索 结果 的 纺 略 图 


延 述 加 载 古 一 种 第 用 技术 ， 它 可 以 在 加 载 其 他 搜索 结果 的 同时 显示 当前 已 找到 
的 结果 ， 参 见 Ebay Motors 和 BestBuy 应 用 ( 见 图 4-16)。 在 屏幕 已 显示 满 内 容 
时 ， 大 部 分 应 用 的 做 法 是 ， 提 供 一 个 “查看 更 多 结果 ”的 按钮 ， 或 者 自动 加 载 更 多 
结果 。 


mele BY 7:30 PM 


Gnog BAME 1:207 


Search Results 
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220 items found 


yl " Www i & 34 $39.99 


Apple® Smart Cover for 
Apple® iPad 2 - Green 
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Apple® Smart Cover for 
Apple® iPad® 2 - Orange 
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Loading more results... 
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不 要 分 页 显示 和 表格， 因为 那样 不 符合 在 移动 设备 上 六 贤 信息 的 目 然 交 互 模式 。 


s¥ a 


" 标明 已 找到 搜索 结果 的 总 项 数 。 使 用 延迟 加 载 ， 而 不 是 分 页 显示 的 方式 。 
、。 设 定 一 种 合理 的 默认 分 类 模式 。 


4.2 分 类 

在 显示 搜索 结果 时 ， 选 择 一 种 合理 的 默认 分 类 方式 非常 重要 。 一 点 点 常识 加 上 用 户 
调查 就 足以 找 出 最 有 效 的 默认 分 类 模式 。 根 据 当 前 的 界面 设计 模式 选择 性 地 实现 其 
他 分 类 功能 ( 见 图 4-17) : 


。 ENIX 
。 分 类 排序 选择 奏 
。 分 类 表单 
| 
Option v Option Option sort by 
Most popular 
Recently popular 
Highest price 
Lowest price v 
Highest price me 
Lowest price Y 
Newest 
Apply 
AASA SRA ABER 分 类 表单 
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4.2.1 屏 内 分 类 

如 果 所 要 分 类 项 很 少 ， 可 以 采用 屏 内 分 类 模式 ， 用 户 只 需 点 击 一 次 就 可 以 实现 分 类 排序 。 
根据 屏幕 内 其 他 界面 元 素 的 布局 ， 把 分 类 选项 放 在 屏幕 的 顶端 或 底部 (ILEI 4-18)。 

用 3 个 分 类 项 实现 4 种 分 类 方式 。 对 于 按照 价格 分 类 ， 为 用 户 提 供 2 种 选择 : 升序 
和 降序 。 


santa monica, ca — Jul 19 to Jul 21, 2011 iPod = 3 12:14 AM 
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: d$ y 10.7 miles |®| Online Only 
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Popular 


以 明确 的 方式 告知 用 户 当前 采用 CEA 的 分 类 选项 。 如 打分 类 选项 无 法 
很 好 地 与 触发 侣 按钮 栏 融合 ， 芳 虑 使 用 分 类 排序 选择 堪 。 


4.2.2 RHP XE 

选择 器 模式 是 屏 内 分 类 的 良好 补充 。 很 多 UI 控 制 元 素 都 可 用 作 选 择 器 ， 但 要 考虑 
应 用 所 属 操 作 系 统 的 设计 原则 aan, Android 应 用 通常 用 菜单 作为 选择 器 ，iOS 应 
用 则 用 picker 控件 和 操作 表 作 为 选择 器 ) 。 


选项 标题 可 以 长 一 些 (更 加 明显 )， 也 可 以 显示 更 多 的 选项 。Walmart 把 分 类 按钮 放 
在 徘 近 搜索 区 域 的 位 置 ， 而 realtor.com 则 把 分 类 按钮 与 其 他 视图 选项 和 动作 放 在 一 
起 ( 见 图 4-19 和 图 4-20). 


如 采 要 面 同 所 有 操作 系统 ， 那 么 使 用 复 选 框 是 一 种 比较 向 便 的 方法 ， 如 Target 的 设 
ib; 也 可 以 使 用 基 浮 菜单 ， 如 Awesome Note 的 设计 ( 见 图 4-21), 
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根据 操作 系统 的 设计 惯例 选择 控制 搜索 结 东 分 类 的 方法 ， 或 使 用 不 受 操作 
系统 影响 的 界面 方案 。 要 清晰 地 向 用 户 表明 当前 采用 的 分 类 选项 。 


ux 
3 


423 ”分 类 表单 

很 多 应 用 都 把 分 类 和 过 滤 功 能 整合 在 一 屏 内 显示 ， 通 常 称 为 提炼 (Refine), KE 
最 为 有 效 的 分 类 模式 ， 它 要 求 用 户 打开 表单 ， 选 择 搜索 选项 ， 然 后 执行 选项 (点击 
“确定 ”或 “应 用 ”按钮 ， 见 图 4-22), 


s¥ a 


J 在 使 用 这 种 模式 之 前 ， 应 该 首先 旁 虑 使 用 其 他 更 为 有 效 的 分 类 选项 触发 如 
Ey 或 分 类 排序 选择 颖 。 
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iPod = 5:23 PM 


HA 201: O HA fi] G 8:49 om 


Back Refine Search Search 


Cancel Refine Search 


Search in location: Austin 
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Sort your results by: 
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Search 


4-22 cars.com 和 eBay classifieds 应 用 


4.3 过滤 


搜索 大 量 数据 还 要 求 执行 过 滤 操 作 ， 这 一 操作 也 被 称 为 提炼 。 过 滤 操 作 依 赖 于 用 户 
选择 的 ， 用 以 提炼 搜索 结 末 或 大 量 人 图 4-23 给 出 了 第 见 的 过 小 模式 。 


| 
Scope A Scope B Scope C xia 
— Criteria 
Criteria Criteria 
Criteria 
如 py 
各 py 

A AL CREB URAL T6 Hb LEAF 


图 4-23 ”常见 过 滤 模 式 


如 条 要 为 用 户 提 供 可 选 的 预先 过 让 技 术 ， 参 考 前 面 介绍 的 范围 搜索 模式 。 


4.3.1 RAKE 
BENDRE, BRA EE Sch ub ae REX B pe Ze EE Ia] — RAR. FA PAG ZU, 
AS ee PRE. HeyZap 使 用 了 标准 的 触发 按钮 栏 ， 而 Google 则 使 用 垂直 分 布 
的 选项 卡 实 现 过 滤 操 作 (JILE 4-24), 


iPod 去 
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CBS News fll ACL Festival Jv FHABAE FH TRINE, FAP Bek th ee ps 
型 的 文章 或 频道 浏览 信息 ( 见 图 4-25), 


不 要 把 这 种 过 滤 模 式 用 作 主 要 导航 ， 而 应 该 用 它 来 分 组 、 过 滤 信 息 内 容 ， 详 细 内 容 
参见 10.245, 

SXSW le HERH TH EREE, Feeda Fever 新 闻 
阅读 应 用 通过 一 系列 非常 简单 、 有 特色 的 复 选 框 来 过 滤 新 闻 来 源 ， 见 图 4-26. 
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4-26 SXSW 和 Feed a Fever 应 用 


过 小 絮 选 项 的 用 词 应 该 清晰 无 误 、 易 于 理解 。 向 用 户 表 明 当 前 所 用 或 起 效 
tear s D — ^] 


43.2 ”过 滤 容 器 

过 证 容 磺 也 可 以 用 来 亚 示 过 兰 选 项 ， 它 与 屏 内 过 契 一 样 高 效 。 快 速 请 动 或 触摸 操作 

Xt AP REST IFA as. Audible HJiX JE exe — T fa] Hu UE AR ALES, mu Sam 则 用 许 

ZTEL, 1 LE ue Tay Hoe tive tth Al EAN RBS. PT Sam 应 用 来 

说 ， 更 好 的 设计 应 该 是 保持 地 图 可 见 ， 然 后 动态 地 过 着 俱乐部 地 址 ， 而 不 是 提供 一 
ETCH EWE” Pki (ULE) 4-27). 
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Create 
Account 
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4-27 Audible 和 Sam's Club 应 用 


4.3.3 过滤 对 话 框 
和 了 网络 应 用 中 的 弹出 对 话 框 一 样 ， 过 让 对 话 框 也 是 一 种 自然 交互 模式 。 它 可 以 让 
用 户 选 择 过 滤 选 项 或 取消 操作 。iOS 系统 下 的 TripAdvisor 有 一 个 和 目 定义 过 诚 对 
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话 框 ， 而 Android 系统 下 的 USPS Mobile MEH T BRU AU Xe fe zs 3e qa Hate ( 见 
4-28), 
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4-28 Triplt 3] DueTodayLite 应 用 
因为 过 小 对 话 框 完全 可 以 实现 过 滤 功 能 ， 因 此 可 以 用 前 两 种 模式 实现 更 多 的 操作 ， 
然后 在 内 容 项 所 在 页 面 直接 应 用 过 滤 选 项 。 
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使 用 简短 的 过 滤 选 项 列表 ， 和 避免 滚屏 。 如 果 列 表 较 长 或 有 多 个 过 滤 选 项 ， 


考虑 使 用 过 渡 表 单 。 更 多 关于 过 滤 图 表 数 据 的 例子 请 参见 6.1 市 。 


43.4 过滤 表单 

更 高 级 的 过 滤 /提炼 选项 可 以 让 用 户 方便 地 访问 海量 数据 。 例 如 ，Kayak 在 表单 中 
基于 价格 、 上 品牌 和 星 级 过 滤 酒 店 。Zappos 采用 了 类 似 的 方法 ， 在 标题 栏 中 使 用 了 
iOS 系统 标准 的 清除 / 确定 (Clear/Done) 按钮 ( 见 图 4-29), 


Freetime 在 其 过 站 表 单 中 使 用 了 自 定义 的 控制 项 。 用 户 首先 选择 过 着 目录 ， 然 后 选 
择 过 滤 条 件 ， 系 统 会 对 日 程 执行 过 滤 操 作 LE 4-30)。 


5:59 PM ] iPod = 10:25 AM — 
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4-29 Kayak 和 Zappos 应 用 


filter filter 


4-30 Freetime 应 用 


条 件 过 滤器 也 称 为 谓语 编辑 器 (Predicate Editor) 或 表达 式 生 成 器 (Expression Builder), 
是 一 种 高 级 过 害 功 能 ， 负 见于 报表 工具 。 图 4-31 是 网 络 和 呆 面 程序 第 用 的 标准 布局 。 
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Wuffo 的 表达 生成 器 
受 表 单 的 影响 ， 在 移动 应 用 中 创建 条 件 过 症状 非 党 困难 ， 


得 非常 好 〈 见 图 4-32). 
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常见 模式 : LAE (Toolbar), E&A (Overlay Menu)、 情 境 工 具 (Contextual 


Tool) 、 内 联 操作 (Inline Action)、 调 用 操作 按钮 (Call to Action Button), HŒ 
操作 (Bulk Action ) 。 


在 Designing Web Interfaces 一 书 中 (http://shop.oreilly.com/product/97805965 16253. 
do, O'Reilly 出 版 )， 我 和 Bil Scott 提出 了 富 交 互 网 络 应 用 设计 的 6 条 原则 。 其 中 
最 核心 的 两 条 是 : 直截了当 (Make It Direct) 和 轻 量 化 设计 (Keep It Lightweight) 。 
这 两 条 原则 也 同样 适用 于 移动 应 用 界面 中 的 工具 和 操作 设计 。 


“直截了当 ” 指 在 输入 域 周围 显示 结果 ， 界 面 应 该 直接 反映 用 户 的 交互 结果 。Flickr 
的 内 联 编辑 功能 就 是 个 典型 的 例子 〈 见 图 5-1)。 
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图 5-1 Flickr 的 内 联 编辑 功能 


而 “ 轻 量 化 设计 ， 则 要 求 尽 可 能 保持 交互 过 程 的 轻 量 化 。 早 前 的 网 站 Digg 即 十 遵循 这 
一 原则 的 典型 案例 ， 甚 对 文章 的 一 步 化 操作 极 大 地 促 就 了 该 网 站 的 成 功 〈 见 图 5-2), 


注 1: 也 有 人 将 其 译 为 “上 下 文 工 具 ， 与 本 书 译 法 相差 不 大 。( 译 者 注 ) 
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图 5-2 Digg 的 经 量化 设计 “Digg It” 按钮 


当 我 了 解 到 Josh Clark 发 起 的 “按钮 已 过 时 ”这 一 活动 时 ， 我 对 以 上 两 条 设计 原则 
Hir SRAM. th Sik 


“按钮 已 过 时 。 在 现实 世界 中 ， 我 们 通常 需要 按钮 ， 但 它们 工作 时 有 一 定 
的 距离 一 一 是 对 主要 目标 起 作用 的 次 要 工具 。 灯 的 开关 在 这 个 位 置 ， 它 能 

点 亮 的 灯泡 却 在 别 的 地 方 。 通 过 观察 这 一 非 直接 式 的 交互 过 程 ， 我 们 了 解 
e 与 按钮 的 关联 并 不 十 分 明显 。 和 触摸 屏 设 备 带 来 了 一 场 革 命 ， 人 类 可 
以 不 断 地 把 软件 的 主要 内 容 作 为 控制 工具 ， 这 就 形成 了 直接 交互 (Direct 
Interaction) 的 假象 。 


“我 并 不 是 说 一 定 要 完全 抛弃 我 们 业已 熟 态 的 按钮 。 我 们 依然 od 
关 ， 也 需要 交互 设计 中 的 按钮 ， 特 别 是 在 触发 抽象 动作 时 (例如 “ 通 
Twitter 共享 内 容 )。 但 一 定 要 知道 交互 过 程 所 依赖 的 硬件 设备 是 什么 
无 法 实现 直接 交互 时 ， 我 们 确实 需要 做 些 额 外 的 工作 。 触 朱 屏 内 的 界面 多 
许 用 户 在 更 多 的 情境 下 与 设备 进行 直接 交互 。 随 着 新 的 解决 方案 的 出 现 ， 
我 们 不 应 该 墨守成规 ， 而 应 该 敞开 胸怀 ， 接 纳 更 多 的 可 能 性 。 在 为 触摸 屏 
设备 设计 交互 万 案 时 ， 一 定 要 时 第 自 辣 : 此 处 真 的 还 需要 另外 一 个 按钮 或 
控制 项 吗 ? ” 


以 Photoshop Express 为 例 ， 这 一 移动 应 用 沿用 了 旧式 桌面 系统 和 网 络 软件 的 设计 惯 
例 ， 设 计 了 对 一 副 图 像 执 行 裁剪 、 矫 正 、 旋 转 以 及 翻动 等 操作 的 方案 WE 5-3), 


[z! 


Crop l 
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5-8 Photoshop Express 应 用 


Tap'n'Scrap 应 用 则 可 以 让 用 户 直接 对 图 像 进行 操作 ( 见 图 5-4)。 我 可 以 通过 张 开 并 
拢 的 手指 放大 图 像 ， 用 相框 来 裁剪 图 像 ， 通 过 拖 搜 来 旋转 或 禾 正 图 像 。 我 们 也 可 能 
会 想到 ， 利 用 沸 动 手势 可 以 翻阅 图 像 ， 虽 然 该 应 用 并 没有 实现 这 项 功能 。 


Poe A 


5-4 Tap’n’Scrap 应 用 允许 用 户 直 接 对 图 像 进 行 操作 
如 果 你 的 移动 应 用 真 的 需要 按钮 或 是 控制 项 ， 请 考虑 图 5-5 所 示 的 模式 。 
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图 5-5 ”常见 工具 模式 


5.1 工具 栏 


工具 栏 也 称 为 操作 栏 (Action Bar)， 其 中 包含 实现 屏幕 级 操作 的 工具 。 在 Pandora 
应 用 中 ， 工 具 栏 包括 切换 列表 视图 选项 、 曲 目 排 序 选 项 、 暂 停 或 跳 过 片头 选项 等 。 
BlackBerry 操作 系统 下 的 A+Picture Effects 应 用 也 提供 了 包含 常用 操作 的 工具 栏 
( 见 图 5-6)。 


iOS 系统 中 默认 的 工具 栏 是 谈 蓝 色 的 ， 但 其 风格 是 可 以 调整 的 〈 见 图 5-7), 

有 了 时， 某 些 操作 可 能 有 一 些 需要 具体 定义 的 选项 。 不 受 操 作 系 统 平台 影响 的 解决 方 
案 是 ， 用 级 联 式 菜单 显示 用 户 已 选择 工具 的 选项 。 很 多 移动 应 用 程序 都 用 这 种 方式 
提供 编辑 和 格式 定义 功能 (ULI 5-8)。 
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iOS 系统 中 默认 的 工具 栏 和 Trip Journal 应 用 中 风格 化 的 工具 栏 
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5-8 QuickOffice Pro 和 Document To Go 应 用 


Evernote 应 用 通过 另 一 种 方法 提供 富 文本 格式 编辑 功能 
图 5-9), 


可 见 的 嵌入 式 面板 
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5-9 Evernote 应 用 


iOS 系统 中 的 操作 表 (Actionsheet) 是 另 一 种 为 已 选择 工具 提供 更 多 选项 的 方法 。 
Pulse 很 好 地 利用 它 实 现 了 4 种 不 同 的 ， 分 享 一 个 故事 的 方法 。 但 是 ，Yelp! 和 
Ibis 在 使 用 操作 表 显 示 分 类 和 过 滤 选 项 时 都 忘 了 用 标记 标明 用 户 已 选择 的 工具 (HU 


5-10)。 更 好 的 分 类 和 过 滤 方 法 ， 参 见 第 4 昔 。 
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Cancel Cancel Cancel 


图 5-10 Pluse, Ibis 和 Yelp! 应 用 


工具 栏 通常 显示 在 屏 希 底 喘 ， 包 含有 屏 硕 级 的 操作 。 工 具 栏 内 的 图 标 应 该 
熟悉、 易于 识别 的 ， 或 者 采用 标签 加 图 标的 设计 。 
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5.2 选项 菜单 

与 工具 栏 一 样 ， 选 项 菜单 也 包含 屏幕 级 的 操作 ， 但 却 有 很 多 种 不 同 的 访问 和 显示 方 
法 。Android 系统 的 菜单 通过 硬件 菜单 按钮 访问 ， 但 其 他 系统 下 的 菜单 或 许 要 通过 
点 击 屏幕 上 的 开关 或 触摸 菜单 按钮 才能 打开 OLE 5-11 和 图 5-12). 
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图 5-11 Android 系统 下 的 菜单 和 Audible 应 用 的 播放 菜单 
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如 末 可 能 ， 采 取 和 直接 交互 式 的 设计 方案 。 不 要 把 导航 隐藏 在 选项 米 单 中 。 
« 如 采 某 一 屏 只 有 一 个 操作 选项 ， 芳 虑 使 用 调用 动作 按钮 模式。 
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5.3 ”调用 动作 按钮 


如 末 茶 一 屏 内 只 有 一 个 主要 的 操作 选项 ， 采 用 调用 动作 按钮 的 模式 或 主 比 工具 栏 或 


菜单 要 更 好 。 诸 如 Groupon, Gilt, Expedia 以 及 Foursquare 之 类 的 应 用 都 选择 了 这 
种 模式 ， 而 设 有 使 用 传统 的 工具 栏 或 选项 某 单 WL] 5-13 和 图 5-14). 
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对 于 只 有 一 个 主要 操作 ， 外 加 一 项 辅助 操作 的 屏幕 来 说 ， 这 种 模式 也 能 起 到 不 钳 的 
效果 ， 比 如 Bill Minder 应 用 的 设计 〈 见 图 5-15)。 但 在 这 种 情况 下 ， 一定 要 为 主要 
的 操作 设计 出 不 同 于 其 他 按钮 的 视 完 效果 。 
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5-14 Expedia XJ Foursquare 应 用 
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5-15 Bill Minder 和 Nerflix 应 用 


Va 


不 要 把 主要 操作 隐藏 在 菜单 中 ， 也 不 能 将 其 设计 成 无 法 识别 的 工具 栏 图 标 。 
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5.4 情境 工具 


一 定 要 让 其 显而易见 (良好 的 对 比 效果 )， 不 言 自明 (含义 清晰 的 标签 )。 


情境 工具 可 以 作用 于 屏幕 内 特定 的 操作 对 象 。 如 有 果 只 在 恰当 的 情境 处 显示 此 类 工具 ， 
它 就 能 起 到 非常 好 的 效果 〈 还 能 有 效 缓解 界面 的 混乱 现象 )。 例 如 ， 在 ChartDroid 
应 用 中 ， 长 按 某 个 对 象 (Android 系统 特有 的 手势 ) 能 调 出 图 表 选 项 在 WebOS 系 
统 下 的 Tweed 中 ， 触 摸 某 条 推 信 能 调 出 一 个 选项 列表 (ILE 5-16 至 图 5-18). 
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5-16 ChartDroid #0 Tweed 应 用 
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5-17 Android 系统 下 的 Mail 和 iFiles 应 用 
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5-18 Barns & Noble Nook 和 2doApp 应 用 


情境 工具 可 以 是 模 态 化 的 ， 如 先前 的 例子 ， 也 可 以 是 非 模 态 化 的 ， 如 DailyBurn 和 
Twittermobile 的 设计 (ILA 5-19), 
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5-19 DailyBurn 和 Twittermobile 应 用 


Va 


如 末 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 如 琳 需 要 按钮 ， Rae E E 
` 可 操作 对 象 的 旁边 。 (RR Pro do n OE 的 图 标 。 


5.5 ”内 联 操 作 


内 联 操 作 也 可 作用 于 屏幕 上 某 个 特定 的 对 象 ， 但 与 前 一 模式 不 同 的 是 ， 其 操作 总 是 
可 见 。 例 如 Audible 应 用 中 的 “下 载 ” 按 钮 和 Teleflora 应 用 中 的 “购买 ”按钮 (IL 
5-20), 


很 多 程序 的 内 联 操作 都 采用 了 全 状态 按钮 (State-full Button), 4H ACL 中 的 “添加 ” 
按钮 ， 点 击 后 会 变 成 “ 移 除 ”按钮 ，OpenCaching 中 的 “收藏 ” 星 标 可 以 开启 或 关 
BH] (WLI 5-21)。 如 果 按 钮 包含 有 更 多 的 状态 ， 请 参阅 下 一 模式 一 一 多 状态 按钮 。 
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5-21 ACL Music Festival 和 OpenCaching 应 用 


A a 如 果 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 Hu rn 
象 的 位 置 。 使 用 用 户 熟 悉 或 带 有 文字 标签 的 图 标 。 每 个 对 象 最 多 只 能 有 
Ry 1~2 种 内 联 操作 。 


5.6 ”多 状态 按钮 


正常 情况 下 ， 用 户 界 面 的 控制 项 应 该 只 有 一 个 操作 目的 。 但 多 状态 按钮 是 个 例外 。 
征 受 限 的 移动 设备 屏幕 内 ， 按 钮 既是 触发 副 又 可 以 作为 一 种 反馈 机 制 ， 这 样 做 具有 
一 定 的 实用 价值 。 


以 在 Audible 应 用 中 下 载 一 个 故事 为 例 ( 见 图 5-22)。 你 最 先 看 到 的 是 下 载 一 个 
故事 有 的 内 联 操 作 先 项。 触摸 它 可 以 开始 下 载 文 件 ， 此 时 它 会 变 成 一 个 表示 下 载 
进度 指示 如 ， 同 时 附 高 有 可 以 扩 击 ， 用 来 取消 下 载 鸭 选 项 ， 以 及 观看 该 故事 的 
选项 。 
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在 Apple App Store 应 用 和 Android Market 应 用 中 ， 两 者 的 “购买 ”和 “更 新 ” 按 
钮 都 使 用 了 这 一 模式 ( 见 图 5-23). 


男 一 种 第 见 ean n. 5-24 和 图 5-25), "ET 
FAP HORE VE GRE, SC — ODOR TE, Z9510.3 市 。 但 在 执行 不 可 修复 
的 操作 之 前 ， 这 种 要 求 确 认 操 作 的 设计 是 非常 合 etit 
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Modify/delete SD card contents 


More 
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N 
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Item One in #07333B 22pt $19.98 Subtotal: $39.96 
Price: $9.99 Shipping: $7.49 


EED (eme D 


Item Two in #07333B 22pt $19.98 


eX UE Ce 


Continue Shopping (18pt regular #202020) 


TOTAL: $47.45 


Two-tap Remove: First tap, button 3 i 
changes to red; Second tap commits 
action (item is removed, others slide up) 
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多 状态 按钮 非常 适合 一 系列 联系 紧密 、 在 有 限 屏 幕 空间 连续 执行 内 的 操作 。 


5.7 ”批量 操作 
常见 的 批量 操作 包括 : 选择 、 添 加 /删除 和 重新 排序 。 程 序 的 主屏 幕 内 不 应 该 塞 满 
此 类 操作 选项 ， 而 应 该 采用 批量 操作 模式 的 设计 。 
iOS 系统 自 带 的 Photos 应 用 提供 了 一 种 选择 模式 ， 用 户 可 以 从 相册 中 选择 文件 进行 
共享 。 与 此 类 似 ，Animoto 应 用 提供 了 对 视频 某 一 部 分 内 容 进 行 重新 排序 和 移 除 操 
作 的 设计 ( 见 图 5-26), 


Shopping List 应 用 的 设计 包含 有 一 个 人 简单 的 列表 编辑 功能 CULE] 5-27). 
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12:16 AM iPod = 12:16 AM 


My Shopping List i sts My Shopping List Lists My Shopping List 


Undone Undone 


M Remove (0) 一 Move (0) i| Remove (3) = Move 全 
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诸如 Path 和 Pulse 之 类 的 应 用 都 有 一 个 简单 的 配置 页 面 ， 可 以 配置 添加 、 移 除 和 重 
新 排序 之 类 的 批量 操作 〈 见 图 5-28)。 
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Manage Sources 
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Damon Monica 
©) LOL CATS 
Share with other friends: 
mE Patsy Watts Merriman Share 


: 诸如 删除 和 重新 排序 之 类 的 批量 操作 最 好 在 编辑 模式 下 进行 。 提 供 明显 的 
a 选项 ， 让 用 户 可 以 退出 编辑 模式 。 


op 6 = 


图 表 


常见 图 表 模 式 : mai AER (Chart with Filters)、 总 览 加 数据 式 图 表 (Overv- 
iew + Data) 、 滚 动 预览 图 表 (Scrolling with Preview)、 数 据点 细节 图 (Data Point 
Details), 、 详 细 信 息 (Drill Down)、 缩 放 (Zoom In)、 数 据 透 视 表 (Pivot 
Table) 、 火 花 谱 线 图 (Sparklines ) 。 


移动 应 用 的 图 表 设 计 可 以 沿用 印刷 和 有 加 面 系统 图 表 设计 的 原则 ， 也 可 以 效仿 后 两 
者 成 功 的 案例 。Dona M. Wong 撰写 的 一 本 名 为 The Wall Street Journal Guide to 
Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures 的 
书 很 好 地 介绍 这 方面 经 验 。 此 外 ， 我 还 建议 读者 读 一 下 Stephen Few 写 的 关于 图 表 
设计 的 书 。 


所 有 的 图 表 模 式 都 建立 在 基本 图 表 的 设计 之 上 。 最 简单 的 图 表 应 该 包括 标题 、 轴 标 
签 以 及 数据 。 数 据 应 该 显示 为 饼 状 图 (Pie)、 条 形 图 (Bar), E (Coulmn), 
面积 图 (Area), H&R] (Line), Aa K (Bubble)、 散 点 图 (Scatter Plot)、 子 弹 
(Bullet)、 雷 达 图 (Radar)、 计 量 图 (Gauge) 或 混合 图 表 。 根 据 图 表 的 类 型 不 
同 ， 或 许 还 需要 设计 图 例 。 


RunKeeper Pro 用 柱状 图 显示 了 用 户 的 跑步 速度 ， 而 GasLogto 用 折线 图 表示 了 基于 
时 间 的 油耗 成 本 ( 见 图 6-1). 
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aes ^ cal 


> 3.56 E 
Stop Pause 


6-1 RunKeepr Pro 和 Gas Log 应 用 


建立 了 基本 的 图 表 之 后 ， 一 定 要 小 心 图 表 垃 圾 (Chart Junk), AAR E ze rp 
那些 多 余 的 无 助 于 用 户 理解 图 表 的 信息 ， 或 者 会 让 浏览 者 分 心 的 视觉 元 素 (维基 百 
科 )。 关 于 图 表 垃 圾 的 更 多 内 容 ， 参 见 10.4 市 。 


在 打开 Photoshop 设计 图 表 之 前 ， 男 一 个 要 做 的 事情 是 了 解 程序 员 使 用 的 图 表 库 。 
类 似 于 ZingChart 和 Sencha Touch Charts 之 类 的 图 表 库 本 身 就 包含 有 一 些 设计 精 民 
的 图 表 (ILAI 6-2), 但 其 他 一 些 库 中 的 图 表 则 可 能 需要 程序 员 自 己 额外 编写 一 些 代 
码 才 能 使 用 。 


lst 
Quarter 0 


Jan Feb Mar Apr May Jun 
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本 童 我们 将 介绍 的 图 表 模 式 如 图 6-3 所 示 。 
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带 过 滤器 的 图 表 带 预览 窗口 的 图 和 总 览 加 数据 式 图表 数据 点 徊 市 图 
= | ZOMCONN 
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日 p WS Seed 
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| /Vv 
iy Label ENNY 
| 一 /YY 
数据 查询 图 LEGES 数据 透视 表 火花 详 线 图 
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6.1 市 过 滤器 的 图 表 
我 们 可 以 为 基本 的 图 表 形 式 加 上 时 间 控 制 或 其 他 过 让 功能， 以 提升 其 数据 表现 能 


以 Fidelity 和 AccuFuel 应 用 的 设计 为 例 ， 程 序 可 以 在 不 同 的 时 间 点 处 分 析 其 中 的 数 
im (UE 6-4). 


ADIRE de DEAE E RT IR] BE UE T al], ERARA boe] AT A AE PB Bede 28 |]. TE 
Chaikin 应 用 中 ， 由 于 触摸 点 击 对 象 位 于 图 表 之 内 ， 用 户 其 至 连 看 都 看 不 清楚 ， 更 不 
要 说 对 其 进行 操作 了 ( 见 图 6-5)。 
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Revenue $0.00m 52 wk Lo 105.23 
P/E 0.00 52 wk Perf +10.50% 
Yield 2.16% Rel to S&P -0.18% 


RIMM 


CHAIKIN POWER TOOLS @ U.S. markets are closed. 
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110 | #62 


我 推荐 把 控制 项 放 在 屏幕 底部 ， 如 SmartGlance FU Blue Mobile 应 用 的 设计 (IL 
6-6) ， 这 样 用 户 可 以 用 拇指 对 其 进行 操作 ， 手 党 也 不 会 遮 住 要 访问 的 数据 。 
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6-6 Blue Mobile 和 SmartGlance 应 用 


Android 系统 下 的 NewsWeather 和 Daylight Calendar PH ABAI HA A BA FUT ial ct ue Es 
表 所 显示 内 容 (ILE 6-7). 
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图 表 的 各 方面 特征 都 可 用 来 过 夸 信 息 。 在 来 自 Sencha Touch Charts 图 表 库 的 例子 
中 ， 图 例 可 以 用 来 过 滤 图 表 所 显示 的 数据 。 点 击 图 表 能 调 出 图 例 ， 点 击 “Coal” 可 
以 动态 地 移 除 图 表 中 关于 US Energy Consumption 的 变量 ( 见 图 6-8). 


Qt) DoeB"nme:;»« ORIUEEBDo BN @257™ 
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» 8 


" 使 用 标准 的 UI 过 滤 控 制 以 及 过 滤 模 式 ， 参 见 第 4 童 。 动 态 更 新 图 表 数 据 ， 
` 而 不 是 扔 给 用 户 一 个 “应 用 ”(Apply) 按钮 。 


6.2 ”市 预览 窗口 的 图 表 
这 种 图 表 模 式 最 适合 用 来 显示 随时 间 变 化 的 数据 ， 通 过 提供 更 多 的 上 下 文 内 容 和 历 
史 数 据 ， 它 可 以 更 好 地 与 移动 屏幕 融合 ， 而 不 需要 用 户 执行 “请 动 ” 操 作 。 


ROUDE SOAR, FDR BCE Ti be OBA AR AZ. — EU Pie 22 af T 
“a”, RRR CTR), RTL frUSE ( 见 图 6-9). 
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大 部 分 商业 应 用 都 采用 只 读 的 带 预 览 窗 口 的 图 表 ( 见 图 6-10) ， 在 较 长 一 段 时 间 内 
的 内 容 之 中 显示 当前 数据 例如， 当天 的 价格 上 升 ， 但 整个 月 或 整 年 的 价格 却 处 于 


下 降 趋势 )。 更 多 例子 参见 数据 点 细 习 图 模式 .。 


Douge Bien 
QD Fidelity ~=" 
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Boeing to cut 510 jobs as Shuttle program... 
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3 a 
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窗口 ， 使 用 较 大 的 触摸 对 象 更 易于 用 户 的 操作 。 


Ve hn 3k > [z 
6.3 总览 加 数据 式 图 表 
第 3 草 也 介绍 过 这 种 模式 ， 但 在 本 草 中 特 指 用 图 表 作 为 总 览 的 模式 。 6-11 和 
6-12 中 的 两 个 例子 都 用 图 表 总 结 了 最 重要 的 信息 ， 在 其 下 方 有 一 个 表格 显示 详细 
数据 。 


总 览 应 该 向 明 扼 要 ， 表 格 的 设计 应 该 易于 阅读。 以 上 来 自 于 MicroStrategy 应 用 的 
例子 束 显 得 非常 拥挤 ， 其 所 用 字号 也 小 于 移动 应 用 应 该 采用 的 字号 大 小 。 备 选 方案 
更 易于 阅读 ， 并 在 屏幕 顶端 对 关键 性 的 量度 做 了 总 结 : Total Customers 和 Average 
Revenue per Customer ( 见 图 6-12 ) 。 
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6-12 Microstrategy 应 用 的 Income Analysis 模块 及 其 备 选 方案 ( 线 框图 ) 


Rj 


x 测试 图 表 ， 看 看 用 户 是 否 能 回答 以 下 三 个 简单 的 问题 主题 是 什么 ?哪些 
。 信息 最 为 重要 ? 最 重要 信息 的 具体 数值 是 多 少 ? 


6.4 ÄR AMT E 


T2 zJ) Fe Ae A 48 Ht 4€ (onHover) 状态 ， 所 以 要 用 另外 一 种 交互 方式 来 显示 数 
据点 的 详细 信息 。 在 以 下 例子 中 ， 点 击 图 表 将 显示 已 选择 日 期 内 页 面 训 览 的 详细 信 
E, (DLE 6-13), 
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在 来 自 NASDAQ QMX 和 Yahoo! Finance 两 个 应 用 的 例子 中 ， 数 据点 在 图 表 底 部 的 
预览 窗口 中 高 亮 显 示 (E| 6-14), 
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3€ Sencha Touch 图 表 库 的 示例 使 用 模式 对 话 框 来 显示 数据 点 的 详细 信息 ， 相 比 之 
下 ， 在 数据 点 周围 显示 详细 信息 的 做 法 要 更 好 一 些 ( 见 图 6-15), 
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6-15 来自 Sencha Touch 图 表 库 的 示例 


Roambi 采用 了 一 种 可 以 通过 点 击 “+” 图 标 访问 详细 信息 的 “ 细 贡 模式 ”。 模 式 窗 
口 和 框架 内 有 一 个 用 以 深 动 到 某 个 特定 数据 点 的 深 动 条 。Roambi 的 开发 人 员 称 为 
“viewtron”( 见 图 6-16), 


Close Cinco Bayou... Close Cinco Bayou... 


September 


你 可 以 考虑 通过 “ 按 下 并 持续 ”(onTap) 操作 来 显示 数据 点 的 详细 信息 ， 


网 络 应 用 的 图 表 让 人 们 形成 了 通过 “指针 匡 停 ”操作 查看 细节 的 心理 预期 。 
( 
”提供 用 户 所 需 的 更 多 内 容 。 


6.5 详细 信息 图 


根据 可 用 性 最 大 化 原则 “有 输入 的 地 方 就 应 该 有 输出 。 用 户 期 望 通过 触摸 图 表 来 查 
看 详细 信息 。 详 细 信息 图 和 数据 氮 细 区 图 不 能 同时 存在 ， 你 应 该 衡量 这 两 者 哪 一 个 
能 最 大 程度 地 发 挥 价值 ， 然 后 选择 适当 的 模式 。 


我 的 设计 团队 设计 了 Adobe Flex Sales Dashboard 应 用 ， 在 第 一 幅 图 表 中 ， 利 用 工具 栏 
显示 详细 的 图 表 人 信息。 显然 ， 访 问 详细 信息 图 的 路 径 与 整个 页 面 ， 以 及 图 表 的 标题 融 
为 了 一 体 。 在 这 个 案例 中 ， 我 们 还 为 不 同 的 操作 系统 设计 了 色调 统一 的 详细 信息 图 ， 
当然 ， 根 据 操 作 系 统 不 同 ， 可 能 需要 在 UI 中 设计 一 个 “返回 ”按钮 (ULE 6-17). 


FX FLEX SALES DASHBOARD Fx Avg Revenue per Sale Fx Avg Revenue per Sale 


My Sales 


6-17 Adobe Flex Sales Dashboard 应 用 中 的 参考 应 用 
在 设计 的 过 程 中 应 该 利用 视觉 吸引 (Invitation), ， 以 此 鼓励 第 一 次 使 用 软件 的 用 户 


触摸 工具 栏 查 看 详细 信息 ， 第 8 章 的 Roambi 应 用 为 “帮助 文本 ”设计 了 文字 提示 
“触摸 工具 栏 以 查看 数据 ”( 见 图 6-18). 
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图 6-18 Roambi 应 用 ， 按 下 信息 栏 查看 数据 
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‘ 


E»! 吸引 用 户 查 看 更 多 的 数据 。 用 面包 届 式 的 导航 (Breadcrumb) 显示 层级 结构 。 


6.6 缩放 图 表 


图 表 或 许 仅 仅 是 屏幕 上 显示 的 众多 界面 元 素 中 的 一 个 ， 如 采 太 小 就 不 易于 阅读 。 篆 
见 的 方式 是 暗示 用 户 旋转 屏幕 ， 以 全 屏 的 方式 查看 完整 图 表 。 隐 藏 标题 和 导航 元 素 
能 为 图 表 腾 出 更 多 的 空间 。 在 用 户 把 设备 旋转 回 默认 状态 时 ， 重 新 显示 导航 和 其 他 
控制 元 素 。 

一 定 要 诱导 用 户 旋转 设备 ， 以 查看 图 表 的 详细 信息 。NASDAQ QMX (Jl A 6-19) 
用 一 个 旋转 手机 的 图 标 来 提供 上 暗示， 而 Bloomberg (ILEI 6-20) 则 用 标签 告知 用 户 
“旋转 以 查看 全 图 。” 这 种 视觉 吸引 只 有 在 用 户 按 下 图 表 时 才 显 示 出 来 。 


Stock Finder NDAQ 


T HASDAO- GS 


| Es SMA 76 Prev. Close 28,83 ll SMA 20 


The NASDAQ OMX Group, Inc. 
29,50 29,71 2 747 140 


28,61 TAT: 28,83 


Currency: USD 


Stock Finder 
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诱导 用 户 旋 转 设 备 来 以 全 屏 方式 查看 图 表 ， 在 用 户 转 回 设 备 时 自动 恢复 
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Equity Indices DOW JONES INDUS.... 
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6.7 ”数据 透视 表 

数据 透视 表 也 被 称 为 “OLAP 立方 体 ”(OLAP Cube), ， 非 常 适 合用 来 建立 轻 量 化 的 
交 又 数据 表 。 在 桌面 和 网 络 应 用 中 ， 通 过 对 图 形 化 界面 的 拖 虹 操作 ， 用 户 可 以 建立 
并 修改 表格 的 总 体 结 构 。 这 种 对 表格 总 体 结构 的 转换 或 数据 透视 正如 其 名 字 一 样 
(维基 百科 ， 见 图 6-21), 


Federal Shipping Grand Total 
bunt Count of Sales Amount of Sales Avg. Sale Amount Count of Sales Amount of : 

H Venezuela . $12,938.92 $417.38 
: France : $28,737.23 $552.64 
Québec d $6,052.15 $550.20 

Canada BC . $13,546.63 $483.81 
Sub Total : $19,598.78 $502.53 

B Finland ! $4,889.84 $244.49 
H Ireland . $551.91 
Portugal 5,438.49 - $362.57. 


= Germany $53,474.88 $713.00 
- Denmark . $18,295.30 $831.60 
RJ $3,289.80 $299.07 

Brazil SP d $13,224.76 $413.27 


Sub Total $16,514.56 $384.06 
| Belgium . $11,393.30 $495.36 
M Switzerland . $13,625.28 $681.26 


Auctria 


6-21 Microsoft Silverlight 的 Viblend 数据 透视 表 


Roambi 应 用 采用 了 一 种 类 似 于 数据 透视 表 的 价 单 界面 ， 用 以 查看 详细 数据 。 了 轴 固 定 ， 
但 对 于 每 个 维度 ，X 轴 可 以 选择 特定 的 数据 类 别 (图 中 村 黄色 的 框架 )。 这 种 设计 可 以 
方便 地 通过 Year by Quarter Profit of All Cities 选项 奋 看 全 年 的 信息 ， 还 可 以 迅速 调整 图 
表 ， 通 过 Product Line: Books 之 类 的 选项 只 查看 某 个 特定 产品 线 的 信息 。 再 次 选择 之 
后 ， 图 表 就 可 以 通过 Online Channel 显示 所 有 城市 和 书籍 的 信息 (ILEI 6-22), 


6-22 Roambi 应 用 


在 一 屏 内 显示 数据 透视 图 表 的 已 选择 项 和 选择 结果 。 根 据 用 户 的 选择 动态 
， SUA. 


6.8 火花 谱 线 图 

火花 谱 线 图 又 称 为 微 图 表 〈Microchart) ， 它 是 以 小 体积 和 高 度 密集 的 数据 埋 称 的 信 
息 图 形 。 它 用 简单 的 方式 ， 在 较 小 的 空间 内 呈现 某 些 量 的 发 展 和 变化 趋势 ， 如 平均 
温度 或 股票 市 场 的 波动 。( 维 基 百 科 ) 


火花 谱 线 图 特别 适合 移动 应 用 ， 因 为 它 能 提供 数据 的 整体 情况 或 变化 趋势 ， 却 不 像 
完整 图 表 那 么 占 空 间 ( 见 图 6-23 和 图 6-24) 。 


3 a 


ESPACE PER ITA RA, LEA Pin itt SE. BK Ee AE a f 
a 息 图 显示 图 表 的 所 有 细 市 信息 。 
a’ 
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Browser: Safari 528.16 
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Browser: Internet Explorer 8.0 364 
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Browser: Firefox 3,6.13 202 
Windows XP 186 
Àrowser: Internet Explorer 8.0 
iPhone (not set 

( ) 169 


reix 3.6.15 


Browse 


2010 


06 april 


2011 
06 april 


Windows 7 

rowser: Firefox 3.6.12 
Windows XP 
Browser Firefox 3.6.13 
Windows 7 C 


Ch NH] «3 © 15:26 


Norton Mobile Utilities 


A Norton 


Battery 
10096 


Temp 
89.6 °F/ 32.0 °C 


CPU 


16% 


Memory (total: 225 MB) 


180M 


Network 


Upload: 0 Kbps 


System Information 
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Sales by Store i te 
y VA . 
& RECOVERY. 

Monthly Sales 

: Total US 
All 'SFUNDING | 

USD (thousands) % of announced 

Corner Type x 
V. 72 6k IS $297.147.930 1 
Inside Mall it $136,267,181 Boa 

V $76.4K a JOBS 

Mini Mall ence Oct 2008 

B 0 ok | .一 一 一 640,329 
Movie Center = AWARDS 

t sanak Lg"; "m. 

Plaza 

M $174K 

uill) 
6-24 Roambi 应 用 和 recover.gov 


BT 


XE] 


常见 模式 : 对 话 框 (Dialog)、 提 示 (Tip). (& AIS (Tour), dimos (Demo). 
幻灯 片 (Transparency)、 首 次 使 用 引导 (1st Time Through)、 持 续 视 觉 吸引 
(Persistent) 、 可 发 现 的 视觉 吸引 (Discoverable) 。 


你 还 记得 第 一 次 使 用 Photoshop 的 情形 吗 ? FAVE Bee, FTP MAR Zia, EN 
在 眼前 的 是 一 个 空白 的 画布 和 一 系列 功能 强大 的 工具 〈 见 图 7-1)。 


gs Adobe Photoshop 


7-1 Photoshop 5.5 的 界面 


当然 ， 这 只 是 我 的 想象 ， 这 些 工 具 是 不 是 一 定 就 有 非常 强大 的 功能 ， 当 时 还 不 得 而 
知 。 实 际 上 ， 我 根本 就 无 从 下 手 ， 但 我 已 经 在 这 球 软 件 上 花 了 不 少 钱 了 ， 就 应 该 
学 会 如 何 使 用 它 。 所 以 我 严 了 一 本 Carla Rose 编写 的 教程 一 一 Sam’s Teach Yourself 
Photoshop 5 in 24 Hours， 然 后 开始 学 习 。 


大 约 十 年 之 后 ， 市 场 上 已 经 有 成 千 上 万 个 移动 应 用 。 在 任何 一 个 类 别 里 都 有 几 十 个 
有 具有 相同 功能 的 产品 ， 并 且 很 多 都 是 免费 的 。 因 此 ， 如 采 产 品 界面 无 法 在 5 分 钟 之 
内 留 住 用 户 ， 那 么 用 户 就 会 转 而 下 载 男 外 一 球 应 用 。 


Layar Reality Browser， 这 于 增 强 现实 的 应 用 给 你 的 第 一 印象 如 何 CULL 7-2) ? 


ZAF ©U” ma 10:10 v m o 2:17 PM 


Lavar a : Accuracy: 6m ^^^. 
2 2 W wiki Range: 10km ^^ 
i 2 a a a a bs, 


r 
= 


| WI DL 
| The Free Encyclopedia 
LR o n 


= 


Q 


7-2 Layar Reality Browser 

什么 东西 能 让 我 从 这 个 灰色 的 屏幕 上 看 到 接近 于 现实 世界 的 东西 ? 是 视觉 吸引 ! TE 
觉 吸 引 是 非常 有 效 的 提示 工具 ， 通 稍 在 用 户 第 一 次 打开 某 个 应 用 ， 或 进入 某 个 新 的 
界面 时 出 现 。 价 单 的 视觉 吸引 能 扭转 乾 填 ， 把 令 人 诅 形 万 分 的 第 一 次 使 用 经 历 变 成 
满意 的 产品 使 用 体验 。 


移动 应 用 中 的 视觉 吸引 模式 如 图 7-3 所 示 。 


对 话 答 提示 
DO THIS 
Top to get started 
THEN THIS 
幻灯 乒 首次 使 用 引导 


图 7-3 BAM MS exh 


7.1 对话 框 


4 b 
使 用 向 导 视频 演示 
Pull to refresh 
Add a cord J 
持续 视觉 吸引 可 发 现 的 视 党 吸引 


或 许 是 因为 很 容易 通过 编程 实现 ， 带 有 使 用 说 明 的 简单 对 话 框 是 移动 应 用 中 最 常见 
最 得 不 到 用 户 注 意 的 元 素 ( 见 图 7-4)。 


Hy mtu SEX. [BUE E Ie EL URS 


Your Name 


| Did You Know? | 


Once your target weight is set the 
app icon on your home screen will 
show a red badge indicating how | 
many pounds or kilos you need to | 


| gain or lose to reach your target. 


OK 


june 5, 2011 Q9 B @ Bl] €9 2:00-m 


© Welcome to Action Method! 


Start by adding a new project 
or a new action step. 


Just click 'New Project’ or the 
'+' below. 


Get started 


7-4 Target Weight 和 ActionMethod 应 用 


部 吸引 
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对 话 框 的 内 容 一 定 要 言 倍 意 凡 ， 确 保 用 户 可 以 通过 其 他 方式 访问 程序 的 使 
用 说 明 。 


7.2 提示 


提示 可 以 出 现 于 屏幕 的 任何 位 置 ， 它 比 对 话 框 更 能 融入 使 用 情境 。 除 了 主页 面 之 外 ， 
提示 也 可 用 于 其 他 屏幕 。eBay 的 应 用 利用 提示 把 用 户 的 注意 力 引 导 至 Save a Search 
功能 ， 如 果 疫 有 提示 ， 用 户 可 能 会 忽略 这 一 功能 ， 因 为 此 处 通常 用 来 显示 页 面 标题 
( 见 图 7-5)。 


iPod = 9:18 PM  ..? BEng B 7 Me 236m 
a —— t = 


Drag apps to your Home screen. 
Touch & hold an app in the 
Launcher until it vibrates. 


^ Tap this star to save a search. We J 


can even notify you when new 
matching items are found! 


NWT Seven 7 Jeans w/ $29.99 

studded detail on + $8.00 
pockets sz 14 0 bids > 

4m 225 

NWT Seven 7 Jeans w/ $29.99 
ae studded detail on + $8.00 》 

pockets sz 20 0 bids 

| 6m 3s 

NWT Seven 7 Jeans w/ $29.99 

studded detail on 4 $8.00 
pockets sz 20 0 bids ? 


My Accoul My Device Setup 


Search 


7-5 eBay 应 用 和 Android OS 


ShoppingList 应 用 的 所 有 主要 模块 都 采用 了 提示 (LRI 7-6). 


提示 要 尽 可 能 地 接近 它 所 指向 的 功能 ， 保 持 内 容 的 简洁 ， 在 交互 开始 时 
(也 就 是 当 用 户 触摸 屏幕 时 ) 关闭 提示 。 


10:16 PM 10:17 PM 


My Shopping List Edit My Shopping List Edit 


F To expand the product 
s filter, just click the 
toolbar! 


Click here to add some 
new items to your 
shopping list! 


7-6 Shoppng List 应 用 


7.3 使 用 回 导 


通过 提供 一 屏 又 一 屏 的 新 内 容 、 不 断 出现 的 新 功能 ， 使 用 向 导 能 提供 无 尽 的 视觉 吸引 。 
Nike GPS 的 使 用 向 导 模 块 就 是 个 非常 优秀 的 设计 ， 它 专门 针对 移动 终端 进行 了 优化 ， 
简化 了 内 容 、 导 航 ， 使 图 像 更 生动 并 使 用 了 明显 的 退出 标志 ( 见 图 7-7 和 图 7-8) 。 


7:14 PM 


Welcome to Nike+ 


TREE 
7H 


(0'00"  (500:00 


Map vour Route 


Start a New Run 


Take the Tour 


Tour the Nike+ App 


Play Nike+ Tag 


7-7 Nike GPS 应 用 


Thank You for 
Purchasing Calcbot. 


Tap “Next” to see how it works. 


eee 


Calcbot is a simple yet intelligent calculator 
with a live expression view and history tape. 


1:33 PM mm } 


Swipe Down to 


Access the History Tape. 


5318008 
0.7734 


Every time you hit the equal key, your 
calculation gets saved to history. Recall 
numbers, expressions, or send them via 


email...all from the history tape. 


. ee 


顾 内 容 简洁 和 视觉 效果 。 


7.4 ”视频 演示 


使 用 向 导 能 很 好 地 从 用 户 使 用 目标 的 角度 出 发 ， 突 出 应 用 的 主要 功能 。 兼 


对 于 那些 依赖 于 特定 动作 或 交互 实现 功能 的 应 用 来 说 ,视频 演示 或 许 古 最 好 的 视 宽 
吸引 模式 ， 因 为 视频 演示 的 本 来 就 是 处 于 交互 状态 的 应 用 。Roambi 用 演示 来 表现 
它 宽 这 的 数据 可 视 化 方式 ， 以 及 专门 为 优化 导航 和 软件 使 用 探索 而 设计 的 操作 动作 
( 见 图 7-9), Google Goggles 的 使 用 同 导 中 包含 有 一 个 可 以 在 YouTube P FTA NI H 


的 演示 视频 ( 见 图 7-10). 


Welcome To Roambi 


| Roambi gives you an exciting new 
way to interact with data on your 
| iPhone. Try the samples included in 
| the app, then transform your own 
Ī| data and deliver it to any iPhone at 
www.roambi.com. It's free! 


| Close Watch Demo 


12:11 AM 


0:05 =“ -0:33 Fd 
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BEGCS BHoWde:e EWES BUMS 1015 
Google goggles tabs p 


图 http:/m.youtube.com/#.， Ei 


You iii 


unveil.mov 


Probably won't work with... 


5 28 


Animals Furniture Apparel 
Watch a video to learn more 


4 | - | Save to | Share | 四 
teamunveil ~m 
Dec 3, 2009 — 964,507 views ma 
692 likes, 90 dislikes = 


| eas | sme m Comments 


7-10 Google Goggles 应 用 


Se 


视频 演示 可 以 展示 应 用 的 关键 功能 ， 也 可 以 用 来 显示 应 用 的 标准 使 用 流程 。 


一 定 要 提供 常见 的 视频 控制 选项 停止、 暂停、 音量 控制 等 )。 


7.5 JIE 


其 他 的 视 沉 吸引 模式 都 在 各 种 网 络 程序 中 出 现 过 ， 而 幻灯 上 族 则 是 唯一 出 现在 触摸 


设备 上 的 视觉 吸引 模式 (至 少 到 目前 为 止 是 这 样 的 )。 它 常用 于 主屏 幕 的 设计 ， 幻 
灯 卢 通 节 以 透明 层 的 方式 显示 在 实际 屏幕 内 容 之 上 ， 用 图 解法 说 明 产 品 的 使 用 方式 。 


Pulse 和 Phoster 应 用 都 用 这 种 视觉 吸引 方式 迅速 并 清晰 地 告知 用 户 ， 如 何在 程序 中 


对 内 容 进 行 导航 LR 7-11). 
sa 


| f FA ZIT Fr SRI — 28 Be te EAT eb, INSERITE BE aedi Ft HEAL AE, — 
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7-11 Pulse 和 Phoster 应 用 


7.6 首次 使 用 引导 


与 其 他 视 委 吸引 | 模式 不 同 的 征 ， 首 次 使 用 引导 不 会 在 与 其 相关 的 屏 攻 出现 之 前 显示 。 


它 征 屏幕 设计 的 一 部 分 
E- E TELE T A MZA. RA ARIS 
利用 首次 使 用 引导 来 很 快 地 吸引 住 用 户 ， 


we 


， 直 到 被 其 他 内 容 履 将、 改写 之 前 ， 或 用 户 执行 操作 之 前 ， 


e iul H,. 4] Mini Diary 和 PageOnce 都 
CASA ( 见 图 7-12). 


2010 oe 15| 5 


oe 15| 


Tap to create memo 


Save | 


| Cancel | 


7-12 Mini Diary 和 PageOnce 应 用 


GL 2L0@ a Uo We 1:52 pm 


Overview 


+ Add your 
Banks 


+ Add your 
Investments 


+ Add your 
Bills 


+ Add your 
Credit Cards 


Alerts Tips 


No new alerts 


No new articles 
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hw 7UMBLED 
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一 定 要 利用 图 像 或 其 他 视觉 线索 明确 地 将 首次 使 用 引导 与 其 他 内 容 区 别 开 
来 (也 就 是 说 ， 不 要 为 视觉 吸引 元 素 使 用 那些 常规 内 容 所 用 的 颜色 、 字 体 
Kh). 


7.7 ”持续 视觉 吸引 


持续 的 视觉 吸 引 是 屏幕 设计 的 一 部 分 ， 它 一 直 可 见 。Jamie Oliver Recipes 应 用 的 设 
计 建 议 利 用 横 屏 显示 方式 来 显示 额外 功能 。 不 省 是 第 一 次 看 到 这 一 屏 内 容 ， 还 是 第 
十 次 看 到 ， 界 面 提示 都 一 直 处 于 显示 状态 。Spring Pad fI HRA. BEZEBJA am 


引 告 知 用 户 ， 通 过 触摸 “+” 可 以 添加 更 多 的 笔记 内 容 COLE 7-13). 


10:28 PM E) Lh ga NT] G 11:36 am 


Curried branzino with coconut 


rice à springpad 3 


v9 


My Stuff Friends Stuff 


Recipes 


Rotate phone for images A 


10 items 


Curried branzino with coconut | 
rice Baby Prep 


9 items 


Preheat the oven to 400*F. Fill and boil Kitchen i 
your kettle. remodel 


Cut the green beans into thirds, then 
add them to a large saucepan with the 


A 


与 其 他 内 容 区 分 开 来 《也 束 是 说 ， 不 要 使 用 笛 规 内 容 所 用 的 颜色 、 字 体 大 


小 等 ) 。 


保持 持续 视觉 吸引 元 素 的 简洁 。 用 图 像 或 其 他 视觉 线索 清晰 地 将 视觉 吸引 


7.8 可 发 现 的 视觉 吸引 

可 发 现 的 视觉 吸引 与 矛盾 修饰 法 (Oxymoron) AHd— 4580. EAA — PERE EERE 
幕 人 简洁 的 前 提 下 红 励 用 户 执 行 特定 交互 操作 的 方法 。 用 户 执 行 常见 操作 动作 时 (如 
请 动 和 点 击 ) 就 能 看 到 这 种 视觉 吸引 模式 ( 见 图 7-14). 


- 一 一 - 4 Release to refresh... 
Pull down to refresh... 


* Last Updated: 4/7/11 10:48:07 PM 

: : What's happening? 
Watching : Buying : Selling Whashagpeing? | g 
3 | : | guo EOR Tweet | 


© Add Location 


| ;€ Reminders Oo» 


- violetzombie RT @jenlouden: 
| E Messages May we all savor our lives today 

- and shine that savoring toward 
| & Saved Searches > Libya, NZ, Iran and around the 


planet #savorserve 20s ago 
eh gens- Twitter for 


| :三 Browse jcategones 


she m m Af 


bbrylv/dZQCOz ^MS 1m aqo 


7-14 eBay 和 Twitter 应 用 


s¥ a 


Š 对 于 可 发 现 的 视觉 吸引 ， 一 定 要 取 之 有 度 ， 用 之 有 节 。 最 常见 的 这 种 视觉 
E» 吸引 模式 是 鼓励 用 户 刷新 数据 的 提示 。 
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o Regstration compiere 


常见 反馈 模式 : 出 错 (Errors). WA (Confirmation), AERA (System Status) , 


功能 可 见 性 模式 : 触摸 (Tap), rz) (Flick). d&'& (Drag). 


8.1 反馈 


与 反馈 有 关 的 可 用 性 准则 要 求 “ 向 用 户 提 供 适 当 、 


清晰 且 及 时 的 反馈 ， 这 样 用 户 才 


能 知道 他 所 执行 的 操作 得 到 了 什么 样 的 结果 ， 才 能 了 解 系统 的 运行 状态 。 反馈 的 类 


型 非常 多 ， 从 简单 的 进度 指示 左 、 
的 反馈 模式 如 图 8-1 所 示 。 


到 复杂 的 动画 和 界面 效 末 。 移 动 应 用 


A Email is required 
| 
Register 
Email | 
User Name 
Password 
Register 
出 错 信息 确认 


© Registration complete 


| Email | 


User Name 
Password 


7,& Submitting . . 


系统 状态 


8-1 反馈 模式 
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8.2 ”出错 信 息 

出 错 信息 应 该 以 纯 文字 的 形式 展现 给 用 户 (不 要 用 代码 )， 应 该 一 语 中 的 ， 并 主动 癌 用 
户 提 供 解 决 办 法 。 在 屏幕 上 突出 显示 出 错 信 息 ， 如 TaxCaster 和 Mint 的 设计 ， 这 样 做 比 
采用 模式 对 话 框 更 有 效 ， 因 为 后 者 有 可 能 会 遮挡 住 出 错 的 原因 ( 见 图 8-2 和 图 8-3). 


iPod = 1:26 PM = 


Cancel Create Account Done Done Accounts 


Oops. A required field needs your attention 


User ID 


Password 


Security Question 


citibank 
Last Updated: 2 minutes ago 


EH 7757 


citibank > 
Last Updated: 2 minutes aao 


8-2 TaxCaster 和 Mint 应 用 


Login Error 


Incorrect email or password. 


s is invalid. Please try again. 


8-3 Barnes & Noble Nook 应 用 ， 在 操作 表 中 显示 出 错 信息 ; Square 应 用 ， 在 对 话 框 中 
显示 出 错 信息 
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用 纯 文 字 的 形式 提供 解决 问题 的 办 法 。 你 证 错误 信息 清晰 可 见 ， 在 屏 硕 内 
显示 蚀 误 信息 ， 不 要 使 用 模式 对 话 框 。 


8.3 ”确认 


当 用 户 执 行 茶 一 操作 上 时， 系统 应 该 让 用 户 对 其 
见 第 10 章 ) ， 寻 求 不 打 断 用 户 使 用 过 程 的 方法 来 提供 反 


对 话 框 之 类 的 反 模 式 ( 参 


a 
=n 


日 /Cho 


进行 确认 。 但 一 定 要 避免 造成 思春 晶 


例如 ，Whole Foods 和 Sprout 应 用 都 用 动画 来 告知 用 户 ， 革 一 项 内 容 被 添加 进 了 
列表 。 当 用 户 触摸 添加 按钮 时 ， 内 容 项 会 “下 落 ” 到 标签 栏 内 的 列表 对 象 中 C 


图 8-4 和 图 8-5), 


iPod = 3:19 PM 


Results Recipe Detail 


Ingredients Method 


Warm up the rice while you're cooking the 
vegetables, and this dish will be ready in less 
than 20 minutes. 


Nutrition 


Per serving : 200 calories (20 from fat), 2g total 
fat, 1g saturated fat, 5mg cholesterol, 210mg 
sodium, 35g total carbohydrate (7g dietary 
fiber, 4g sugar), 7g protein 


EE iPod = 3:19 PM m 


Results Recipe Detail 


Ingredients Method 


Warm up the rice while you're cooking the 
vegetables, and this dish will be ready in less 
than 20 minutes. 


Nutrition 

Per serving : 200 calories (20 from fat), 2g total 
fat, 1g saturated fat, 5mg cholesterol, 210mg 
sodium, 35g total carbohydrate (7g dietary 
fiber, 4g sugar), 7g protein 


Add to 
. Shopping List 


8-4 Whole Foods 应 用 


反馈 与 功能 可 见 性 | 141 


ele MC 3:17 PM 


iPod => 3:17 PM 


$$ the doc says  week16 daily @ the doc says week16 daily 


high-risk pregnancies, long flights, and 
certain travel locations, so talk to your 
doctor before planning any travel. Your 
doctor may suggest ambulating frequently 
during long flights to help reduce the risk of 
blood clots. It is recommended to stop 
flying altogether after 36 weeks gestation. 


high-risk pregnancies, long flights, and 
certain travel locations, so talk to your 
doctor before planning any travel. Your 
doctor may suggest ambulating frequently 
during long flights to help reduce the risk of 
blood clots. It is recommended to stop 
flying altogether after 36 weeks gestation. 


©) To Do: Discuss vacation options 


Starting to Look Pregnant Starting to Look F 


Because of an increase 
uterus and related abd 
some women may begi 


Because of an increase in the size of the 
uterus and related abdominal bloating, 
some women may begin to show as early as 
week 11. Depending on your pre-pregnancy 
weight, your abdominal muscle tone and 
other factors, some women do not look 

¢ * -一 一 = 


the doc says 


8-5 Sprout 应 用 


Kik 应 用 中 的 内 联 反 馈 ，Android Marketplace v Fl rp By d nr FRA Ae SRI A 
不 会 打 断 用 户 使 用 过 程 的 信息 确认 方式 ( 见 图 8-6 和 图 8-7), 


| 而 EO Bulle onm 3 jdheS zm @ FG, fil) @ 1:01 


Register Register 


Pick a unique username that will 
identify you on Kik. 


theresaneil123 


Pick a unique username that will 
identify you on Kik. 


@ 


m Ez | — m E 


™ 


a5 456 


789077 « 


8-6 Kik 应 用 
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6425800 Bi FU «D 240m 
En Travel & Local 


US$0.99 


Camping Trip Planner 


Camping Trip Planner 
Jimbl 


Description 

Configurable camping planner with everything 
needed for any camping trip. Comes pre- 
populated with more than 225 camping items. 


More 
Version 3.0 81.86KB 
1,000-5,000 downloads 91 ratings 
@ vos rv @ 2027 


ggr cne 0 B FT @ 2:40 
E" Travel & Local 


Camping Trip Planner 


Camping Trip Planner 
Jimbl 


Allow this application to access: 


Storage 
Modify/delete SD card contents 


More 


8-7 Android Marketplace 应 用 


有 了 时， 
图 8-8)。 


应 该 突出 显示 确认 信息 的 操作 ， 比 如 当 用 户 提 交 信 息 或 菜 项 交易 结束 时 L 


O4 E09 BAMA 11:257 


We sent an email to 
theresaneil@gmail.com 


You can continue with the checkout, and we 
will save the billing and shipping information 
to your account. 


In the future, you can checkout quickly by 
simply confirming the Security Code for the 
Credit Card on your account. 


8-8 Best Buy 和 Discover Card 应 用 


DISCOVER “x0 


Money Messenger 


12:29 PM = 


Back 


POWERED BY 


PayPal 


Discover Card Ending 4332 


Send Money History 


Your money has been sent! 


e Your payment has been delivered and a 
notification will be sent by PayPal to 
James Young at 


+ It's also a good idea to contact the 
recipient directly so they will know to 
expect the money. 


e You will receive an e-mail confirming 
this transaction. 


Transaction Date: 
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当 用 户 执行 某 项 操作 时 ， 提 示 确 认 信息 ， 但 不 要 打 断 用 户 使 用 产品 的 过 程 。 


8.4 系统 状态 


E 提 升 用 户 对 软件 的 信任 度 。Netflix 应 用 告知 用 户 “ 正 在 加 
AR Pg En ， 而 不 是 把 用 户 蚊 在 那里 ， 因 为 那样 用 户 会 误 以 为 程序 卡 住 了 。 
你 可 以 用 简单 的 信息 、 动 态 指示 如 、 进 度 条 或 者 以 上 元 素 相 结合 的 方式 告知 用 户 
系统 的 状态 。 系 统 状态 信息 可 以 显示 在 用 户 当 前 所 在 页 面 ， 如 Netflix, Android 
Marketplace 和 PageOnce 的 设计 ， 也 可 以 用 履 凋 层 来 显示 ， 如 TaxCaster 的 做 法 
( 见 图 8-9 和 图 8-10). 


9:51 PM 


Gi HGIa:@ ‘bh; a ull Q3) 3:13 pm 


m Featured 


Instant Queue 


um OpenBuilding... Godzilab Inc 


rex Free  *r*edesek Free 
PhoneWea... — Evernote 
SBSH Mobile 5... Evernote Corp. 
Leg d e $3.99 reed: Free 
Due Today — . News360 
Lakeridge Sof... for Phones 
News360 LLC 
week $2.99 wkkweth Free 
The — . Herman the 
Economist Hermit 
The Economis... Capcom Mobile 
kikk Free e ek $0.99 
— . YP Yellow - . Localicious 
Pages WhitePages 
Yellowpages.c... 
kitti Free ede Installed 


= Loading... 


Instant Queue 
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Payments due 


-$5,400 


Creating Account 
This may take a moment... 


min -$1,045 


dri Wve 


-.| Investments E hr your computer. 


$35,000 


= 
Es 


A|s|p|ric|n] J]k].. 


Alerts 


| Tax center 


Tax help 
is here! 


2 new alerts 
10 total 


Ez ixic|vis|Ni = 


8-10 PageOnce 和 TaxCaster 应 用 


Kayak 用 进度 条 显示 搜索 航班 所 得 结果 。 注 意 这 一 设计 方案 在 10S 系统 和 Android 
系统 中 的 差异 (OLA 8-11). 


路 


AUS to RIO Mon, Oct 03, 2011 - Mon, Oct 17, 2011 


Searching flight sites... 


8-11 Android 和 iOS 系统 下 的 Kayak 应 用 


对 于 可 能 会 持续 较 长 时 间 的 进度 ， 提 供 一 个 “取消 ”按钮 ， 比 如 SXSW 应 用 对 于 
下 载 新 日 程 安排 时 的 设计 。Adidas miCoach 应 用 预先 告知 了 用 户 所 要 下 载 文件 的 大 
小 ， 但 也 提供 了 一 个 “取消 下 载 ” 选 项 ( 见 图 8-12). 
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1:10 PM LN] june 4, 2011 @ 


T el) 49 11:51 pm 


aj) 


AAA 
AN 
lk a ! 
if É | E 
Welcome to SX: SW Fe nolich [11&1 Ferr 
Please hang on à moment while we J Fetchin g... 12% 
download the ee information. Dew es ea aca 
(A network connection is required.) miCoach is now downloading 


v. d = the coaching voice package: 
gc English (US) Female. 


Downloading new schedule 


8-12 SXSW 和 Adidas miCoach 应 用 


s¥ a 


告知 用 户 系 统 的 状态 。 为 可 能 会 持续 较 长 时 间 的 操作 提供 “取消 ”选项 。 


8.5 功能 可 见 性 


功能 可 见 性 指 某 个 对 象 向 用 户 呈 现 出 的 可 执行 操作 ， 例 如 抽 民 的 拉手 或 门 上 的 把 手 。 
软件 中 的 功能 可 见 性 包括 : 拖 动 手柄 (Drag Handle), AAIR (Page Peel), i& 
如 按钮 和 请 块 之 类 的 三 维 控制 对 象 等 。 


移动 应 用 也 可 以 采用 诸如 此 类 的 模式 。 图 8-13 是 触摸屏 UI 设计 中 常见 的 功能 可 见 
性 模式 .。 
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ui HT) dI 


触摸 滑动 46, 9, 


8-13 功能 可 见 性 模式 


8.5.1 触摸 
斜 角 和 阴影 等 视觉 设计 技巧 能 让 界面 元 素 看 上 去 是 可 触摸 的 。Pictory 和 GroupMe 
都 利用 了 这 类 效果 ， 其 界面 中 的 控制 项 很 明显 是 可 触摸 的 ( 见 图 8-14)。 


Enter your name and email 


| Theresa Neil | 
theresaneil@gmail.com e 


Finish 


a|w|e[n|r| v|u] rjojP 


A|s|p]ric]H|»]KiL 
Sz |xjc|viB|N| ve. 


return 


Howsto user? 


8-14 Pictory 中 的 三 维 按钮 和 GroupMe 中 带 有 立体 效果 的 按钮 和 输入 框 
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这 种 效果 一 定 要 用 得 恰到好处 ， 这 一 点 非常 重要 。Yelp 的 “搜索 ”按钮 就 有 些 差 
强人 意 ， 表 单 中 的 所 有 元 素 看 上 去 都 好 像 是 按钮 ， 连 输入 框 的 标签 都 不 例外 (UL 
8-15), 


vancel Filter / Sort Search 


Sort Results By 


Highest . 


Best Match Distance Bated 


Carbohydrate § Carbohydrates 


Narrow Results By 


= 


Number of Points 


Neighborhoods 


Search 


图 8-15 Yelp 的 搜索 按钮 不 太 像 按钮 〈 左 图 ) ， 所 有 的 标签 好 像 都 是 可 触摸 的 〈 右 图 ) 


» 8 


n 用 常见 的 视觉 效果 来 暗示 可 触摸 的 控制 项 。 一 定 要 小 心 谨慎 地 使 用 三 维 效 
、 果 ， 泛滥 的 阴影 和 斜 角 效果 会 降低 可 读 性 。 


8.5.2 滑动 
有 很 多 种 方式 可 以 告知 用 户 ， 还 有 更 多 的 内 容 可 以 浏览 。iOS 中 的 页 面 指示 器 一 
一 些小 点 一 -已 经 广泛 应 用 于 网 络 和 移动 应 用 ( 见 图 8-16) « 


另 一 种 方式 是 在 屏幕 边 绿 显示 其 余 内 容 的 一 部 分 ， 在 屏幕 底 端 或 是 两 侧 边缘 都 可 以 。 
这 种 设计 能 鼓励 用 户 清 动 屏幕 ， 查看 更 多 内 容 ( 见 图 8-17). 


全 虹口 QQ@ BHM) G11:01m 


Badge Collection 


| 


YOU \ 


free time is a powerful 
calendar and scheduling tool. 


take a look at all it can do for you 
by flipping through the next 
few pages. 


8-16 FreeTime 和 Audible 应 用 


„ill T-Mobile => 1:53 PM m. „il. AT&T M-Cell 全 12:52 PM 


7" 


72 piics from 17 users 


f = - = 
e The Best Food Ever. 2 4 = Timeline 


cellguru 4m 
Review and Giveaway: WOWee One 
Portable Phone Speaker 


thecellularguru.com/2011/04/13/rev... 
了 id LA P 


gue _ ss 
Lu be 2a. 
~ 3 


d 


~ 


via @TheCellularGuru 


reneritchie om 
@philnickinson When are we going to 
see @AC_Llioyd's girlfriend? (The one 
he stole from Capt. Kirk?) 


BE fo 


jonfingas 9m 
(C reneritchie "| mean it! Hounded by 
all you people wanting, y'know, facts." 
ti Retweeted by reneritchie 


@ 2 | kaseyisnotw 


8-17 Piictu XU TweetBot 应 用 
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另 一 种 不 太 常 见 的 方法 是 使 用 滚动 条 。 通 过 点 击 滚 动 条 的 其 一 区 域 ， 用 户 可 以 迅速 
跳 到 对 应 的 内 容 处 。Roambi 在 其 界面 右边 显示 了 一 个 几乎 是 透明 的 滚动 条 ， 用 绿色 
点 表示 当前 所 处 的 位 置 。Skype 采用 了 基 于 字母 表 的 演 动 条 ， 这 种 方式 常 凡 于 iOS 
系统 下 的 应 用 〈 见 图 8-18)。 


Sales by Region 


iPod = 9:36 AM 一 
E 


Groups All Contacts 


Central 


人 Contact requests P 
FDA PR a € 

Carona Roach Cantor m P E 

Cocoa Outlets e Q Angie 4 
———— 一 

Cape Coral Outlets Centrais 7 

xX) Constantin Moldov... 

Boynton Beach Outlets e A 


+A PDO 


X; Enrico Berti 


aN<x = 


8-18 Roambi 的 Cardex 模块 和 Skype 应 用 
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^ 通过 页 面 指示 器 ， 或 显示 其 余 内 容 的 一 部 分 来 告知 用 户 ， 滑 动 屏 幕 可 以 发 
， 现 更 多 内 容 。 不 要 使 用 反应 过 慢 的 滚动 条 。 


8.5.3 Hak 
拖 归 手柄 表明 某 个 内 容 项 是 可 移动 、 可 重新 布局 或 可 重新 排序 的 。 它 在 类 似 于 
Yahoo Finance 和 Roambi 应 用 中 的 列表 设计 中 起 到 了 很 好 的 效果 (ULE) 8-19), 


请 块 也 依赖 拖 动手 柄 实现 功能 〈 见 图 8-20), Z0 6.2 市 的 设计 。 


D 拖 动手 柄 的 图 标 一 定 要 易于 识别 。 为 拖 动手 柄 设计 一 个 突出 的 效果 ， 以 此 
。 告知 用 户 这 一 对 象 是 可 操作 的 。 


5:54 PM 
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Cancel Columns 


Key Column [Drag and Drap) 
Choose and Order Golumns 
^ | 

DJI 


Dow Jones Industrial Average 
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NASDAQ Composite 
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Apple Inc. 
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(Google Inc. 
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| | 
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Vv) Q1 2008 Market Value (M) 


Profits as % of Sales 


Rev % change from 2006 
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Check All Uncheck All Reset 


8-19 Yahoo! Finance 和 Roambi 应 用 
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8-20 Audible 和 Roambi 应 用 
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eB 9 = 


帮助 


常见 帮助 模式 : 使 用 说 明 (How To)、 界 面 元 素 说 明 (Cheat Sheet)、 使 用 向 导 (Tour). 


移动 应 用 程序 应 该 易于 用 户 学 习 ， 让 用 户 快 速 掌 握 其 使 用 方法 。 但 是 ， 无 论 应 用 如 
何 与 人 的 直 完 相符 ， 邦 知 要 提供 一 些 帮 助 。 第 见 的 帮助 模式 如 图 9-1 所 示 。 


| | 
| | 
Seorch 
1 
2 
Browse Help Topics 
Top Questions 
- a Bug : 1 
Give Feedback 
H ecd 4 > 
2) destnphon 
3) desCnption 
4) destnption 
使 用 说 明 界面 元 素 说 网 A aE 


图 9-1 SULTSBI X 


9.1 使 用 说 明 

使 用 说 明 用 来 解释 该 如 何 使 用 应 用 。 它 可 以 只 占用 一 个 页 面 ， 如 Phoster 和 Pictory 
的 设计 (ULE 9-2)， 也 可 以 作为 稍 庞大 的 帮助 系统 的 一 部 分 ， 如 Awesome Note 的 
设计 ( 见 图 9-3), 


a 


are ae ERE} 


Select A en 

>Import photo (BE | 

e nt 
age Ad joe 


Tau 


SNE 加 SHARE fd 
Usa @+ 


Basics 

Read Me Add New Note 
Today To-dos 

. Number of Notes 
Troubleshootings View Calendar 
c My idea 

General (Main Screen) Q Wise sayings Passcode 

Protected 
= xX Tr | Diary Folder 
Organizing Folders LJ 


opping Today To-dos / 
Number of Notes 
m. To Do list | 


Organizing Notes 


Edit Folder List 
Add Folder 


Working with Notes 


Auto/Lock 


9-3 Awesome Note 应 用 
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在 使 用 说 明 中 综合 使 用 屏幕 截图 、 插 图 和 文本 等 多 种 形式 。 


9.2 界面 元 素 说 明 

界面 元 和 到 说 明 以 较为 少量 的 信息 介绍 屏 从 上 的 所 有 界面 元 到 。Tap’n’ scratch 为 此 单 
独 设计 了 一 个 页 面 ， 而 Android 系统 下 的 Swype 则 采用 了 对 话 框 的 方式 ， 参 见 第 7 
= (ILAI 9-4) 。 


June4,2011 O @ B 2 Bill C9 4:265» 


A new way to 
type 


mS E Just trace a 
scd f g h through e Choose Background o Add Cul to Image 


the letters of 
a word o Choose image o Choose Image Filter 
o hodie PME o Move Objects Up or Down 
Add Text 
o e Delete Selected Object 
o Add Object 


For Tips and Help — 
press and hold the 


r- 


Tutorial | More Tips | Cancel | 


9-4 Android 系统 下 的 Swype 应 用 和 Tap’n’Scrap 应 用 
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X) 界面 元 素 说 明 是 优良 设计 不 可 或 缺 的 部 分 ， 但 它 可 以 让 用 户 很 快 习惯 产品 
。 的 使 用 方法 ， 也 能 提高 使 用 效率 。 


9.3 ŁAD 

使 用 向 导 或 许 是 在 应 用 内 最 好 的 提供 帮助 的 方法 。 程 序 应 该 在 用 户 首次 使 用 时 提供 
可 导 ， 并 且 人 允许 用 户 在 后 续 的 使 用 过 程 中 随时 访问 ( 见 图 9-5 和 图 9-6)。 更 多 关于 
使 用 向 导 的 内 容 和 示例 参见 第 7 章 。 
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9-5 Triplt 40 FreeTime 应 用 
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Meet your goals and get better for your sport with To download your new plan or workouts, just press 
miCoach! Audible coaching and color intensity Sync in the miCoach Mobile app. 


zones guide you through your workout--it's like 
having a personal trainer by your side. 
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9-6 Adidas miCoach 应 用 


虽然 Valspar 应 用 的 快速 使 用 向 导 (Quick Start Guide) 极 具 吸引 力 ， 且 充满 了 富有 
价值 的 内 容 ， 但 用 户 可 能 无 法 “快速 ”学 会 如 何 使 用 产品 ， 因 为 这 部 分 有 超过 12 页 


的 内 容 。 尽 量 把 癌 导 部 分 的 内 容 降低 到 6 页 以 下 (OLEI 9-7). 


valspar paint™ 


quick start guide 


This is where you can explore Valspar colors. 
Tap on a color family for color options. 


back to home page 


valspar paint 


explore colors —— search for colors 
ESAE pick your preferred 
select a color family store between 


bà id bá lowe's or 
Lid ludi independent 
lui id ids bud retailers 

| double tap one of 
m "t "m ld ine color families 
i Li to go to the next 
- iis aad d id screen 


swipe for more ub 


9-7 Valspar 的 快速 使 用 向 导 并 不 “快速 ” 


全 。 疝 导 的 设计 应 该 简短 、 充 满 吸 引力 。 


使 用 向 导 所 包含 的 应 该 是 应 用 中 最 关键 的 功能 ， 最 好 从 用 户 的 使 用 目标 开 
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肥 模 式 


常见 反 模 式 : 标新立异 (Novel Notion) 、 隐 喻 错位 (Metaphor Mismatch), Ze 
对 话 框 (Idiot Boxe), KÆ BI (Chart Junk)、 按 钮 海 (Oceans of Button), 


Th Are PRE? 维基 百科 的 定义 为 : 


反 模 式 也 称 为 “陷阱 ”(Pitfall) ， 通 常 指 对 于 某 些 问题 所 采取 的 没有 实质 性 革新 的 、 
糟糕 的 解决 办 法 。 人 们 已 将 其 作为 界面 设计 的 一 种 模式 进行 了 研究 ， 以 便 在 后 续 的 
设计 中 避免 犯 同样 的 错误 ， 也 希望 在 对 无 法 工作 的 系统 进行 调查 时 也 能 识别 出 此 类 
模式 。 这 一 术语 源 自 计算 机 科学 ， 很 明显 是 受到 “四 人 组 ”的 Design Patterns 一 
书 的 影响 ， 该 书 介 绍 了 一 些 高 质量 编程 的 方法 。 

一 一 维基 百科 ， 反 模式 


与 软件 设计 中 的 反 模 式 类 似 ， 以 下 有 反 模 式 也 是 界面 设计 中 要 避免 的 第 见 设计 陷阱 。 


10.1 标新立异 

标新立异 式 设计 的 目的 在 于 求 新 、 与 众 不 同 、 突 出 创意 或 创新 。 但 大 部 分 时 候 ， 这 
种 做 法 是 错误 的 ， 用 户 难 以 理解 ， 产 品 很 难 使 用 。BUI* Gallery 的 创始 人 Richard 
Gunther 关于 这 一 反 模 式 的 描述 为 :“ 你 通 稍 能 区 分 出 移动 应 用 开发 团队 是 否 具 有 传 
绕 网 络 应 用 开发 的 背景 。 这 些 团 队 篆 稼 会 演 试 把 卓 有 的 交互 模型 ?| 入 到 新 的 应 用 平 
台 ， 并 设计 一 些 非 标 准 UI 元 素来 凸显 他 们 的 “创意 。 


标新立异 式 的 反 模 式 在 移 应 用 中 随处 可 见 ， 从 主要 导航 到 个 别 的 控件 、 交 互 方式 或 
手势 设计 。Weight Watchers 应 用 就 包含 有 许多 标新立异 式 的 反 模 式 ， 最 明显 的 莫 过 


注 1: 指 《 设 计 模 式 》 一 书 的 4 位 作者 Erich Gamma, Richard Helm, Ralph Johnson fH John Vlissides。( 译 者 注 ) 
注 2: 参见 http://www.thebuigallery.com/。( 译 者 注 ) 
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于 主导 航 的 设计 。 其 开发 团队 创造 出 了 一 个 目 定 义 菜 单 容 颖 ， 其 中 包含 有 跳板 式 的 
主导 航 (OLA 10-1). 


Menu 


Instructions & Ingredients 


Menu a 


10-1 Weight Watchers 应 用 


这 种 反 模 式 非 常 粳 糕 ! 产品 腔 肿 得 难以 使 用 ， 界 面 元 素 的 组 织 十 分 人 ， 那 些 能 把 
访问 者 变 成 用 户 的 重要 产品 功能 隐匿 不 现 〈 在 跳板 式 导 航 的 第 二 页 ) 。 虽 然 我 能 明白 
Weight Watchers 的 用 意 ， 但 如 果 他 们 采用 了 标准 的 导航 模式 .、 ess 
应 用 可 能 会 更 容易 上 手 ( 见 图 10-2 和 图 10-3)。 


Weight Watchers | Login | Weight Watchers Log In 
Cheese Fries P Cheese Fries o 
eooooooo eooooooo 
m WO bad -. 
“Recipes” Cheat Sheets ER ity Meeli ings More Mee! 


10-2 选项 卡 式 的 菜单 选项 ， 线 框图 (28); 可 滚动 的 选项 卡 选项 ， 线 框图 (6B) 
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Weight Watchers | Login (= Featured Recipes 9 


: About Weight Watchers 


| Success Stores 


: Expert Articles 


| Meeting Finder 


| | Featured Recipes 
Cheat Sheets 


Nene Cheese Fries B 


Ww Shopping List ESGOSUISS 


© B c3 


10-3 列表 式 的 菜单 选 页 ， 线 框图 ( 左 图 ) ; 内 部 屏幕 的 概念 ( 右 图 ) 


iPhone 上 的 Fly Delta 应 用 的 菜单 就 很 不 同 寻常 ， 但 现在 它 已 被 另外 一 种 “ 标 新 六 
异 ” 的 反 模 式 取代 一 一 用 户 (执行 渭 动 操作 后 ) 会 发 现 有 页 脚 内 容 ， 其 中 包括 有 
“主页 面 ” 按 钮 和 一 个 指向 “Contact Us” 的 链接 ( 见 图 10-4)。 


4:55 PM 


Back 
anti~ 
Pattern 
Sea: Delta Schedules 
From 
Direct Flights Only 
To 
Departing from 
Direct Flights Only W 
Flying to 
Leaving 


r / S 


Leaving Aug 21,2011 LS Anytime v | 
k e- 
Today - 9pm-3am 了 


Search 
— À— 


ft Home (3) Need assistance? Contact us. 


10-4 Fly Delta 先前 (2B) 和 新 的 〈 右 图 ) 菜单 设计 
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如 生产 品 支 持 单 击 一 次 束 能 访问 主 界面 的 功能 ， 标 准 的 iOS 选项 卡 也 能 起 到 很 好 的 
RA. Contact Us 本 应 该 显示 在 页 面 的 右上 角 ， 而 不 古 “ 哄 ”在 页 脚 处 。 这 种 菜单 
设计 能 称 得 上 走 “ 创 新 ， 吗 ? 完全 不 能 ， 它 只 会 让 应 用 更 难 用 。 


有 时 ， 富 有 天 赋 和 经 验 的 设计 团队 能 充分 利用 技巧 把 “标新立异 ” 式 的 反 模 式 变 得 更 
可 用 一 些 。Gowalla 的 设计 师 将 标准 的 选项 卡 菜 单反 其 道行 之 ， 设 计 出 了 漂亮 且 可 用 的 
菜单 。Forecast 试图 模仿 Gowalla 的 设计 ， 但 结果 却 是 画 虎 不 成 反 类 犬 (WE 10-5)。 


All Friends Nearby 


Forecasts 


anti~ 


ma) Zev Green | 了 P ter, s Coffee E 
> 15 Metrotech Center y ing wi ee - 


Friends' Activity 
Eric K. > Cheer Up Charlie's 


Mike Schleif 
CNN Coffee A 1104 E 6th St 


7:00 PM & + 
Robert Holmes A.T. F. > Cheer Up Charlie's 
Zagat Ti 
pA NM 1104 E sth St 


7:00 PM lg i 


Mike Pearson 

Disney Magical Express 
it's a small world after all 
http://picplz.com/zg2R 


Eric K. > Alamo Drafthouse Cine... 
Justin Timberlake singalong!!!! 
10:15 PM * 


10-5 Gowalla 和 Forecast 应 用 


Forecast 中 只 有 两 个 风格 化 的 选项 卡 ， 用 户 必 须 仔 细 观 察 才能 确定 自己 当前 看 到 的 是 
Forecasts 还 是 Check Ins 的 信息 。 视 觉 设 计 并 没有 起 到 应 有 的 效果 ，Check Ins 选项 卡 
的 凹 进 效 果 看 上 去 好 像 用 户 选 择 了 它 ， 但 其 实 不 然 〈 见 图 10-6)。 


一 个 人 徇 单 的 触发 栏 就 能 揭 开 用 户 的 困惑 。 实 际 上 ， 在 仔细 了 解 过 这 于 应 用 的 使 用 流 
程 之 后 ， 我 认为 程序 应 该 根据 时 间 的 先后 关系 ， 以 单独 的 “活动 ”选项 卡 显示 用 户 
到 底 选 择 的 是 Forecasts 还 是 Check Ins， 这 才 是 最 佳 的 设计 方案 。 这 样 的 设计 需 
为 Forecast 建立 一 个 用 户 可 识别 的 Forecast 图 标 ， 用 以 暗示 好 友 是 预报 ， 还 是 已 到 
TEDHA. 


Forecast 也 设计 了 一 个 自 定义 选项 卡 栏 ， 但 却 有 点 简陋。 这 类 自 定 义工 具 栏 非常 
适合 那些 只 包括 一 个 主要 的 调用 操作 的 应 用 ， 如 把 内 容 发 布 到 Pinterest 或 通过 
Instagram 分 享 。 实 际 上 ，Forecast 只 包括 两 个 主要 的 操作 一 一 Forecast 和 Check Ins 
( 见 图 10-7 和 图 10-8) 。 
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图 10-6 凹 进 风格 通常 表示 用 户 已 选择 的 选项 
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10-7 采用 IOS 系统 标准 标签 的 线 框图 
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10-8 Pinterest X] Instagram 应 用 


风格 统一 的 “Add Forecast" 
完成 软件 的 第 一 次 使 用 。 另 一 种 方案 
定义 工具 栏 内 (ILAI 10-9), 


按钮 应 该 起 到 很 好 的 作用 ， 
是 设计 “Forecast” 按 钮 的 图 标 ， 并 将 其 


吸引 新 用 户 对 其 进行 操作 ， 


a 


Forecast A + | 


>- 
Forecast 4= 


Forecast where you're going 
so your friends can meet you 


there 


Friend's Activity 


Erik K. :: Cheer Up Charlie's 


ti — St. 
Checked In 7:12 PM 
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A.T.F :: Cheer Up Charlie's 
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Mason oa : Cheer Up Charlie's 
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00 A 
Friends Places Me More 
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A.T.F :: Cheer Up Charlie's a 
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Forecas! 7:00 PM 


Nora Kyle :: Cheer Up Charlie's 
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Forecast 7:00 PM 


Forecast where you're going 
so your friends can meet you 
there 


10-9 ”能 吸引 用 户 的 Add Forecast 按钮 (AB), 


市 有 目 定 义工 具 栏 的 备 选 方案 


( 石 图 ) 


| 45 Ep. 
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。 上 ， 对 于 看 面 设 计 ， 了 最 好 还 息 壮 循 以 往 的 设计 惯例 。 如 东 你 设计 了 一 个 目 


re 
< 


Va 
如 来 你 想 要 对 应 用 进行 创新 ， 请 把 关注 后 放 在 主要 的 功能 和 所 提供 的 服务 


定义 控制 项 ， 一 定 要 对 其 进行 严格 的 测试 和 修正 ， 最 终 达 到 可 用 性 的 要 求 。 


10.2 ”隐喻 错位 

这 种 反 模 式 是 由 于 界面 设计 采用 了 错误 的 隐喻 对 象 而 造成 的 。 隐 喻 错位 可 能 会 发 生 
在 较 低 级 的 层面 ， 比 如 某 个 控制 项 或 图 标 使 用 不 当 ; 也 可 能 会 出 现 于 较 高 的 层面 ， 
如 应 用 的 概念 模型 与 用 户 的 心理 模型 不 匹配 。 


10.2.1 控制 错位 
Calorific 应 用 是 最 典型 的 控制 错位 的 例子 ， 它 提供 了 一 个 年 龄 列表 ， 而 不 是 日 期 选择 器 。 
另 一 个 例子 是 Easy Point Calculator， 所 有 的 标签 看 上 去 都 像 按钮 一 样 ( 见 图 10-10)。 


3020 € BH € 2:06 pm 


en m) & 5:12 pm 


Activity Daily Allow 
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UU CNN 


49 yrs. old 


50 yrs. old 


51 yrs. old 
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52 yrs. old 


Number of Points 


53 yrs. old 


10-10 Calorific 和 Easy Point Calculator 应 用 


What To Expect’s Baby Tracker 应 用 的 导航 控制 方式 和 用 户 的 预期 也 存在 隐喻 错位 。 
乍 看 之 下 ，WTE 包含 有 4 个 “Baby Tracking” 的 选项 和 一 个 “View Log” 按 钮 
( 见 图 10-11)。 
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iPod 会 10:26 PM E iPod = 10:28 PM = 
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LH n - 


Save 
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View Log v» 


10-11 WTE 的 Baby Tracker 应 用 


Baby Tracker 标题 栏 下 面 有 一 个 粉红 色 的 过 滤器 ， 其 中 包含 了 所 有 的 选项 。 虽 然 这 
种 过 滤 控 制 能 很 好 地 应 用 于 ACL 和 News360 之 类 的 应 用 中 〈 见 图 10-12), 但 用 作 
主要 导航 却 并 非 明 智之 举 。 


iPod = 4:44 PM GE 12:14 AM 
At OT Pp Alte ALL so 
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Top Stories 


All Friday Saturday Sunday 
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School of Seven Bells 
Friday - 12:30 PM © > 
LIVESTRONG Stage 


Medeski, Martin & Wood 
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Coheed and Cambria | im. News -Times 
Friday - 4:30 PM @> l 
LIVESTRONG Stage 


Thievery Corporation 
Friday - 6:30 PM 


-IVESTRONG Stage 


Top News 


10-12 ACL 用 过 滤器 控制 所 显示 的 内 容 ，News360 用 过 滤器 控制 所 显示 的 新 闻 
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我 的 儿子 只 有 3 周 大 时 ， 我 安装 了 What To Expect 应 用 ， 当 我 看 到 那 4 Pee 
时 立刻 就 把 它 删 摊 了 。 


10.2.2 ”图标 错位 
图 标 错位 是 另 一 种 隐喻 错位 的 反 模式 。 人 们 总 是 期 望 自己 熟悉 的 图 标 能 提供 特定 的 
功能 。 当 用 户 以 自己 不 熟悉 的 方式 使 用 熟悉 的 图 标 时 会 产生 疑惑 。 


Weight Watcher 的 应 用 的 右上 方 有 一 个 iOS 系统 风格 的 按钮 。 通 和 党， 它 的 作用 类 似 
于 发 送 邮件 或 发 送 到 Facebook, 74 RÆ fl Favorites 和 Add to Shopping 选项 之 后 
非 溃 慨 讶 。 使 用 标准 的 工具 栏 或 许 能 让 这 秋 应 用 更 符合 人 们 的 使 用 习惯 ， 也 是 实现 
Favorites 和 Add to Shopping 这 两 项 功能 的 更 好 方法 (ILE 10-13 ) 。 


= Featured Recipes 9 
3 
Cheese Fries 
Servings; 4 
Instructions & Ingredients Cheese Fries © 


eooooooo 


Menu A | @, c3 


10-13 按 下 “发 送 ” 按 钮 之 后 看 到 的 是 意料 之 外 的 选项 


10.2.3 心理 模型 错位 

我 以 前 所 在 公司 设计 的 一 个 票务 处 理 系 统 息 我 最 乐于 谈论 的 此 类 反 模 式 的 和 案例 。 当 
我 们 遇 到 技术 问题 时 ， 比 如 瑟 记 密码 或 笔记 本 电脑 假死 ， 我 们 必须 登录 系统 ， 剖 览 
问题 列表 ， 选 择 回 题 ， 然 后 将 其 加 入 购物 车 再 碍 看 结 末 。 对 于 零售 行业 来 说 ， 这 种 
设计 非常 优秀 ， 但 它 完 全 不 适合 用 来 做 技术 支持 类 的 应 用 《〈 见 图 10-14). 


Help Desk 


Add your problem(Sj to the cart, then checkout: 


(vi Laptop won't boot 
C) Monitor is dead 
C) Battery is dead 
O Forgot password 


Add to Cart 


10-14 Help desk 应 用 


再 来 看 看 ABC News HJ iPad 应 用 。 它 用 一 个 地 球 仪 来 浏览 新 闻 内 容 ? 当然， 如 果 新 
团 来 自 于 某 个 特定 的 地 理 位 置 ， 这 种 方法 有 其 优势 所 在 。 但 情况 并 非 如 此 。 实 际 上 ， 
ABC News 应 用 内 的 地 球 已 与 我 们 所 在 的 这 个 星球 没有 任何 关系 。 它 只 是 一 个 转 个 


不 停 的 球体 ， 用 户 阅 读 起 来 都 困难 ， 更 别提 说 览 信 息 了 ( 见 图 10-15)。 


Seeking Cheap Travel? 
Dubai at a Discount 


/ y 
- r lj 
z] / ms 


— 


10-15 ABC News 和 GeoWalk 应 用 
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从 图 标 到 控件 再 到 概念 模型 ， 都 可 以 通过 隐喻 提升 用 户 体验 。 但 不 恰当 的 
隐喻 只 能 让 应 用 难以 理解 、 难 以 使 用 。 


10.3 愚蠢 的 对 话 框 
在 Alan Cooper 的 About Face 3 一 书 中 ， 他 这 样 描述 道 : 


只 有 当心 理 状态 与 工具 合 而 为 一 时 ， 人 们 才能 有 更 高 的 工作 效率 …… 没 有 足够 的 借 
口 就 打扰 用 户 的 工作 ， 无 异 于 愚 夸 地 迫使 用 户 暂停 ， 这 是 最 具 破 坏 性 的 行为 。 


Bill Scott 根据 “愚蠢 地 迫使 用 户 和 暂停 ”的 概念 ， 提 出 了 “愚蠢 的 对 话 框 ” 这 一 反 模 
式 。 我 最 常 提 起 的 这 类 反 模 式 是 Photobucket 应 用 的 注册 表单 。 在 我 煞费苦心 地 十 
完了 10 项 内 容 ， 然 后 点 击 那 个 大 大 的 、 绿 色 的 、 和 带 有 了 Agree, Sign Me Up! 标签 的 
按钮 时 ， 程 序 弹 出 了 图 10-16 所 示 的 对 话 框 。 


Abu cou © GO, RB 7:41-m June4,2011 @ BAMA 1121» 


©) Item Added To Cart 


© Create account 


Sku 2343184 has been added 
to cart 


| Go To Cart | | Continue Shopping | 


Are you sure? 


10-16 Photobucket 的 注册 模块 和 Best Buy 应 用 


注 1: 该 书 的 中 文 版 名 为 《交互 设计 精髓 》， 由 电子 工业 出 版 社 出 版 。( 译 者 注 ) 
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哦 ， 当 然 ! 我 确定 ， 我 就 是 想 创 建 账 户 ， 这 也 征 我 为 什么 填 完 了 所 有 要 填 的 内 容 ， 
并 点 击 那个 大 大 的 、 绿 色 的 按钮 的 原因 。 


Best Buy Hise ite kick boe: 你 已 将 一 个 物品 添加 到 了 购物 车 。 虽 然 
破坏 性 没有 那么 大 ， 但 更 有 效 的 做 法 是 仅 系 加 购物 车 内 物品 的 数量 。Zappos 的 做 法 
就 高 明 一 些 ， 它 使 用 一 个 过 渡 动 画 告 知 用 户 把 某 些 东西 添加 到 了 购物 车 (LE 10- 
7)， 这 样 做 一 举 两 得 : 


T Ta BE bc D ELE, 物品 己 被 添加 ; 
。 告知 用 户 ， 购 物 车 在 应 用 的 什么 位 置 。 


iPod = 11:58 AM = iPode 11:58 AM 


ROBEEZ Gigs 


ADD TO SHOPPING CART YN 


ADD TO SHOPPING CART YN 


PRODUCT DETAILS: 


PRODUCT DETAILS: 


It's never to soon to get geared for the > It's never to soon to get geared up for the > 
shore! shore! 

REVIEWS: REVIEWS: 

This product currently has 2 reviews > This product currently has 2 reviews > 
kikik kikrik 

ABOUT THE BRAND: ABOUT THE BRAND: 

For your child ‘s first leather shoe, choose > For your child 's first leather shoe, choose > 
Robeez. Since 1994, Robeez Footwear Ltd.... Robeez. Since 1994, Robeez Footwear Ltd.... 
VIDEO DESCRIPTION: VIDEO DESCRIPTION: 

View the Video Description for this product. > View the Video Description for this product. 


(Note the color shown may be unavailable. ) 


O © 


Search 
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但 实在 征 没 有 必要 用 一 个 打 着 伞 的 犹 咪 来 提供 “充足 的 ”， 反 饶 。 更 多 内 容 ， 参 见 第 
8 3, 


s¥ a 


S 不 要 打扰 用 户 的 使 用 过 程 ， 当 用 户 执 行 了 不 可 撤销 的 操作 (如 永久 性 删除 ) 
Ly 时 ， 仪 显示 个 人 确认 窗口 就 行 了 。 


A 


10.4 图 表 垃 圾 


Edward Tufte 在 他 1983 年 写 的 书 The Visual Display of Quantitative Information 中 
提出 了 图 表 垃 圾 这 一 概念 ， 先 看 一 下 图 10-18。 
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AGIRL'S BESTFRIEND A 


S 
Average price of 2 one caret O 


410-18 是 图 表 垃 坡 还 是 信息 的 图 形 化 显示 ? 


我 个 人 认为 这 是 个 非常 好 的 图 形 化 信息 的 示例 ， 并 非 图 表 垃 圾 。 但 我 也 能 够 理解 维 
基 百 科 对 图 表 垃 圾 这 一 反 模 式 的 定义 :“ 在 图 表 或 图 形 中 那些 多 余 的 无 助 于 用 户 理 解 
图 未 的 信息 ， 或 者 会 让 阅览 者 分 心 的 视 沉 元素。 


10-19 是 来 日 Brain Challenge 应 用 的 反 模 却 示 例 ， 图 未 的 设计 、 双 重 梯度 的 列 、 
高 光 、 斜 面 、 阴 影 效果 、 把 图 标 按钮 用 作 标 签 ， 这 些 都 分 散 了 用 户 的 注意 力 ， 却 没 
有 提升 数据 的 可 读 性 。 另 一 个 例子 来 自 SmartGlance， 背 景 中 绿色 的 果 面 上 放 着 红 
色 的 山子 ， 用 户 基本 上 无 法 阅读 屏幕 上 的 信息 。 


Total Score 


Po 


CHALLE NEE 
ai aten 3] score: 2,700 
FE 


Good work! That's a 
nice report I got from 
ou. 


10-19 Brain Challenge 和 SmartGlance 应 用 
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QlikView 的 报告 模块 上 有 很 多 反 模 式 : 过 滤器 和 图 标的 隐喻 错位 、 报 告 选 择 方式 的 
标新立异 ， 还 有 图 表 垃 圾 。 大 约 一 半 屏 幕 都 用 图 片 罗 盘 来 显示 图 表 (以 及 对 图 表 操 
作 后 的 反应 )。 其 他 空间 则 用 来 显示 体 量 庞大 、 五 彩 斑 澜 、 带 有 模糊 标签 的 三 维 图 表 
( 见 图 10-20), 


Docs 
anti~ 
L 


Patte rr } 


i — ioa 
m vir Eie [aee penr 


— MD te pce 


10-20 QlickView 应 用 


不 要 以 为 深 亮 的 图 表 就 一 定 清晰 明了 。 图 表 垃 圾 通 负 都 华而不实 ， 都 会 让 图 表 看 上 
去 更 美妙 。 例 如 ， 在 以 下 这 个 分 析 软 件 中 ， 图 中 的 曲线 是 表示 平均 值 还 是 国 值 ? 不 ， 
都 不 是 ， 它 仅仅 是 背景 的 一 部 分 。Gerald Nunn 的 OnTrack 用 不 同 的 颜色 表示 数据 
re EIERTBIP*N 〈 见 图 10-21), 


WeatherPro 的 图 表 非 常 漂亮 ,但 如 琳 没 有 以 下 因素 ， 这 些 图 表 会 更 加 多 读 : 


。 每 一 列 中 相互 交错 的 斜 线 ， 
© 元 余 的 了 轴 标 签 
。 小 时 数 的 累加 。 
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AM 48 12:16 AM 


www.grafkunstenaar.ni Visitors 
Glucose Graph 


12.0 


ant~ 


n 
Pattern WITH VOPIUM 


201009 1201 009220 1 0092 £01 0092201 0092201 0092801 009280 1009280100927 


® Pageviews/Day 
20100927 BI 11.35%(107) 


20100926 Ml 11.45%(108) 


20100925 B 7.64%(72) 
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如 图 10-22 所 示 ， 缩 得 日 期 标签 ( 改 成 Mon、Tue、Wed 等 )， 就 可 以 采用 更 大 、 更 
易 读 的 字体 。 图 例 也 能 起 到 更 大 的 作用 。 进一步 研究 之 后 发 现 ， 图 标 “i” 能 打开 图 
例 。 理 想 状 况 下 ， 应 该 默认 显示 图 例 ， 并 通过 选项 隐藏 ， 参 见 第 6x, 


NEW YORK 


Temperature 


| 


58 
54 
50 | 
46 | 
42 
38 
34 


30 
00 06 12 18/00 06 12 18 00 06 12 18 00 06 12 18 00 06 12 18 00 06 12 18 00 06 12 18 
sday Wednesday Thur urday Sunday Monday 
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在 把 玩 WeatherPro 时 ， 我 过 到 了 为 一 个 隐喻 蚀 位 。 你 需要 拉 下 屏 硕 才能 共 至 图 表 ， 但 
这 一 操作 和 手势 通常 用 来 刷新 数据 。 图 10-23 是 该 软件 的 客户 对 于 这 种 设计 方式 的 反馈 。 


Pull to share!? Hmm... &*&*& 
by Lewis Burgess 


Really don't like the new pull down to share. It's counter intuitive as this is how other apps refresh content. 


This should be a button, not a pull down gesture. 


Pull down to share? Stupid! *** 
by @revs 


This is a great app, but the "pull down to share" is stupid and keeps getting activated by mistake. 


Please make an option to turn this off, or change it to pull down to refresh. 


10-23 WeatherPro 应 用 


Va 


在 图 表 和 图 形 中 ， 仅 使 用 那些 有 助 于 传达 所 显示 信息 的 视觉 元 素 . 


10.5 ”按钮 海 

2002 年 ， 当 我 和 Bill Scott 审查 Sabre Airline Solutions 应 用 的 可 用 性 时 第 一 次 提出 
了 这 种 反 模式 。 我 们 俩 让 测试 小 组 评估 了 几 十 个 网 络 和 呆 面 应 用 ， 以 发 现 需 要 重新 
设计 用 户 界 面 的 应 用 程序 。 大 部 分 的 应 用 程序 都 是 用 Java Swing 或 Visual Basic 编 
写 的 ， 其 界面 的 右边 或 是 底部 都 有 一 个 按钮 栏 。 当 水 平 排列 的 方式 并 不 能 布局 完 所 
有 的 按钮 时 ， 就 用 两 行 来 显示 。 所 有 按钮 的 大 小 、 颜 色 、 视 觉 轻重 都 一 样 。 因 此 ， 
在 看 完 所 有 的 按钮 之 前 ， 用 户 很 难 决定 究竟 要 点 哪 一 个 〈 见 图 10-24), 


10-24 FB Visual Basic 和 Java 编写 的 桌面 程序 界面 上 ， 放 有 眼 望 去 全 是 按钮 


eBay HY Android 版 应 用 正 是 如 此 ， 但 它 的 iPhone 版 应 用 却 使 用 了 仪表 式 的 导航 ， 
这 也 正 是 这 种 反 模 式 的 一 个 良好 的 解决 方案 〈 见 图 10-25). 
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eBay Mobile: rusty3144 


Watching Selling 
25 0 


Watching ; Buying : Selling 


Bidding Sold 6 
1 0 pa eee eoe aa a a a a a a o a a aaao hhh diee aa ¢ 
Won Unsold | 4 Reminders O> 
3 0 | 
Didn't Win Scheduled | ud Messages e» 
3 0 | | 
| & Saved Searches > 
| 
eh :三 Browse Categories > 
Im | : 
& | | Your recent items 
Deals Messages 4 


10-25 Android 系统 下 的 eBay ， 按 钮 的 海洋 ， 而 在 IOS 系统 就 有 了 改善 


Footfeed (ILEI 10-26) 在 feed 中 显示 了 所 有 活动 的 所 有 选项 。1Mobile 在 表格 的 每 
一 行 后 面 显 示 相 同 的 按钮 ( 见 图 10-26)。 如 果 你 发 现 自己 总 是 在 某 个 列表 或 表格 的 


茶 一 行内 重复 显示 了 相同 的 按钮 ， 那 么 你 最 好 尝试 一 下 情境 工具 ， 参 见 第 5 半 。 


Logout 1 WVIORILE Market 
A 


Adobe Flash Player Open | 
Dennis Mink Adobe Systems Incorporat... 


Hometown: Danville 
Advanced Task Kille Open | 
ReChild 


Email: dennis@footfeed.com 
I 
Recent Activity — Amazon MP3 Open | 
MP3 A 
Starbucks @ lil Mri ia 
San Ramon, CA = > 
四 ES [3 ASTRO File Manager open 
—€—— Metago 


1 hours ago 
Bay Bridge Toll Plaza | 
3. 


Oakland, CA i Barcode Scanner 

6 hours ago eo, 9.8 ZXing discussion group 

Starbucks KA Bump 

Lafayette, CA 2? Bump Technologies LLC 

1 days ago = 
DriveSafe.ly 
DriveSafe lv 


10-26 Footfeed 和 1Mobile Market: 用 情境 工具 代替 重复 的 按钮 


反 模 式 | 179 


乍 看 之 下 ，Pushbi 好 像 使 用 了 标准 的 操作 栏 ， 但 实际 并 非 如 此 ， 它 的 设计 完全 是 1 
按钮 和 海 。 导 航 按 钮 与 操作 按钮 (主页 、 返 回 、 图 表 、 设 定 、 分 享 ) 搅 在 一 起 。 即 便 
是 那些 仅 对 这 个 图 表 起 效 的 按钮 也 在 上 一 层级 显示 。VisualKPI 也 存在 同样 的 问题 ， 
ENUF ERE” ERRES OLE 10-27). 


at AT&T 全 12:00 PM cz iPod = 1:10 PM ^ Gab 


Transpara 
as of 3/26/2011 11:08:33 AM 


Mean-Time To Repair 


> a y 


Region-W 
Region-Tx 
Calculated 
Trend Description 

MultiPen Today vs yesterday 

Multi Scale Trends on different scales 
Bit OL BGood BH MHH Bunk BNis ON/A 


省 MEE" MEE © MEL. 


DT CAIENUED ALCOULIO,ING 


10-27 Pushbi X) VisualKPI 应 用 


ie: © 


s¥ a 


用 标准 模式 显示 页 面 层级 操作 。 为 内 容 项 的 层级 操作 使 用 情境 工具 ， 而 不 


征 重 复 相 同 的 按钮 。 尽 量 分 离 页 面 层 级 操作 与 导航 元 素 。 


附录 


A.1 其 他 资源 

本 书 的 网 站 和 博客 地 址 是 wWww.mobiledesignpatterngallery.com, 

flickr ýJ E| F i (www.flickr.com/photos/mobiledesign patterngallery/collections) 内 
有 各 个 模式 的 更 多 示例 。 

关于 专业 的 移动 应 用 设计 技巧 ， 请 关注 账户 @mobilepatterns。 


A.2 导航 
A.2.1 主要 导航 模式 


跳板 却 

利用 网 格 布局 各 个 同等 重要 的 内 容 项 ， 利 用 不 规则 的 布 
局 方式 凸显 某 些 项 的 重要 性 。 视 情况 使 用 个 性 化 和 用 户 
目 定 义 选 项 。 


列表 菜单 

列表 来 单 人 很 适合 用 来 显示 较 长 或 拥有 次 级 内 容 的 标题 。 
使 用 列表 菜单 的 应 用 应 该 在 所 有 次 级 屏幕 内 提供 一 个 选 
项 ， 用 以 返回 到 列表 菜单 。 通 和 常 的 做 法 是 ， 在 标题 栏 设 
置 一 个 市 有 列表 图 标 或 “菜单 ”字样 的 按钮 。 
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选项 卡 
为 已 选择 的 菜单 项 设置 不 同 的 视觉 效 末 ， 用 户 就 能 清晰 
地 知道 目 己 选择 了 哪 一 项 。 使 用 易于 识别 或 珊 有 标签 的 
图 标 。 


陈列 馆 式 
陈列 迄 式 导航 能 很 好 地 应 用 于 用 户 经 季 剖 览 、 频 营 更 新 
的 内 容 。 


仪表 式 
不 要 使 用 过 多 的 仪表 式 导 艇 ， 通 过 人 研究 确定 为 哪些 关键 
量度 采用 仪表 去 导航 。 
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隐喻 式 
道 慎 地 使 用 隐喻 式 导 航 ， 鉴 脚 的 模仿 很 可 能 造成 10.1 
节 出 现 的 反 模 式 。 


超级 菜单 式 

在 选择 寻 航 模式 之 前 ， 首 驳 要 确定 信息 架构 。 如 有 要 导 
航 的 对 象 仅仅 古 应 用 中 少数 主要 内 容 ， 就 可 以 使 用 选项 
卡 之 类 的 导航 模式 .。 


A.2.2 ”次 级 导航 模式 


页 面 轮 盘 式 

页 面 轮 盘 却 导 航 能 很 好 地 应 用 于 少量 页 面 的 导航。 利用 
直观 的 指示 絮 标 示 出 总 屏 数 和 用 户 当 前 所 处 的 位 置 。 页 
DFE ES SEAL UH Be AE AT ERIE 
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图 片 轮 盘 式 

图 片 轮 盘 式 导 航 可 以 很 好 地 展示 清新 悦目 的 内 容 ， 如 过 
术 品 、 产 品 和 照片 等 。 利 用 箭头 、 部 分 显示 的 图 片 或 页 
mma (点 )， 提 供 视觉 化 的 功能 可 见 性 ， 以 此 告知 
用 户 有 更 多 的 内 容 可 以 访问 。 


扩展 列表 式 
扩展 列表 式 导 航 能 很 好 地 逐步 显示 某 个 内 容 项 的 更 多 细 
O| 节 或 选项 。 
© 
© 
© 
© 
A.2.3 ”表单 模式 
| A ” ”登录 表单 
gn In deiade Xo DUT Beth, AH DL AY Beth 
e 案 ， 这 样 更 易于 用 户 登 录 。 提 供 取 回 已 忘记 密码 的 
POssv 5A. 
Sign In 


Regster | Forgot Password? 
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a 注册 表单 
注册 界面 应 该 人 简洁 明了 ， 最 好 在 一 屏 之 内 显示 完 所 有 要 


Register ji © 
填 的 信息 ， 把 “注册 ”按钮 放 在 同一 屏幕 内 显示 。 保 证 
— 已 注册 用 户 能 非常 容易 地 登录 。 


Register 


核对 表单 
a 把 提升 速度 、 效 率 和 让 用 户 放 心 作为 设计 目标 。 去 掉 不 
必要 的 输入 域 ， 尽 量 减少 页 面 和 操作 步骤 。 


> 


^. me $000 
Shippi thod 
Shipping address 
Payment method 
Ploce Order 
| 计算 表单 
使 用 标准 的 表单 设计 和 布局 原则 。 如 采 可 以 ， 在 同一 页 
面 内 显示 计算 结果 ， 位 置 尽量 明显 。 
Input 
Input 
Input 
Calculate 
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Search 


搜索 表单 
不 要 让 太 多 的 搜索 选项 吓 到 用 户 ， 把 搜索 条 件 控制 在 


一 页 之 内 。 采 用 能 够 通过 手指 方便 且 快 速 操作 的 控制 
Fines 
Show 100 Results 
(0 SORE 
FER 告知 用 户 当前 所 在 的 位 置 和 将 要 去 的 地 方 。 去 掉 不 必要 
— 的 输入 域 ， 最 小 化 页 面 和 操作 步骤 的 数量 。 


Submit 
长 表单 
不 要 人 为 地 把 表单 划分 成 多 个 步 又 来 避免 屏幕 的 滚动 。 
坚决 要 去 挥 那些 不 必要 的 输入 域 。 遵 人 循 特定 操作 系统 中 
按钮 布局 的 设计 标准 。 

Subrnit 
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A.2.4 表格 模式 


有 表 头 的 表格 

不 要 使 用 上 暗色 网 格 线 和 垂直 分 割 方式 。 文 字 左 对 齐 ， 数 
字 右 对 齐 。 一 屏幕 内 显示 的 表格 内 容 不 宜 过 多 。 如 末 要 
在 单个 屏幕 内 显示 大 量 信息 ， 请 采用 其 他 显示 方式 。 


无 表 头 表格 

每 一 宽 行 内 最 多 显示 三 行 信 息 。 不 太 重 要 的 细 贡 内容 使 
用 较 小 、 浅 色 的 字体 。 不 要 自己 猜测 什么 信息 最 重要 ， 
而 要 询问 客户 的 意见 ， 然 后 作出 有 效 的 设计 。 


固定 列表 格 的 表格 
为 固定 的 列 设计 比较 醒目 的 样式 ， 利 用 背 动 操作 浏 贤 
多 的 数据 。 
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带 有 内 容 总 览 和 数据 的 表格 
表格 内 容 总 贤 应 该 显示 在 数据 上 方 ， 且 要 一 目 了 然 。 


$3000.00 A 


行 分 组 表格 
在 表格 中 为 内 容 总 结 行 设 定 与 其 他 行 不 同 的 视觉 效 末 。 


级 联 式 列表 

使 用 较为 宽 沁 的 信息 结构 可 以 避免 在 应 用 内 产生 较 次 的 
层次 (多 于 3 层 )。 如 采用 级 联 式 列 表 来 导航 用 户 定义 
的 信息 结构 ， 则 可 能 无 法 避免 产生 很 多 界面 层次 。 


附录 | 189 


市 有 视觉 指示 器 的 表格 
使 用 那些 用 户 能 够 迅速 识别 的 视觉 化 指示 妖 ， 去 邱 那 些 
由 |。 不 必要 的 图 标 。 
ill 
ill 
ill 
ill 
ill 
ill 
ill 


可 编辑 表格 

网 络 和 桌面 应 用 程序 设计 之 间 的 权衡 为 可 编辑 表格 提供 
了 丰富 的 经 验 。 不 要 为 大 量 数 据 输 入 使 用 可 编辑 表格 ， 
当知 要 有 大 量 可 编辑 元 素 时 ， 也 不 要 使 用 这 种 表格 模 


E A 
2 
A.2.5 搜索 模式 
显 性 搜索 
— 在 输入 域 周 围 提 供 明显 的 操作 按钮 ， 并 提供 撤销 搜索 
的 选项 。 通 过 反馈 告知 用 户 搜索 动作 已 执行 (参见 第 
8 3€), 
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— 4 


— | 


月 动 补 全 搜索 
如 琳 程 序 在 显示 搜索 结 采 时 有 延迟 ， 就 要 给 出 一 些 反 
馈 。 在 搜索 结 末 中 突出 显示 用 户 输 入 的 搜索 内 容 。 


动态 搜索 
对 于 有 限 的 数据 ， 如 地 址 湾 或 个 人 媒体 库 ， 这 种 搜索 模 
式 韭 第 有 效 ， 但 它 不 太 适 合用 来 搜索 海量 数据 。 


范围 搜索 
根据 数据 集 提 供 合理 的 搜索 范 围 选项 ，3 ~ 6 个 范围 选 
项 足 和 疾 。 用 搜索 表单 实现 高 级 搜索 功能 。 
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保存 搜索 记录 并 显示 最 近 搜 索 内 容 
保存 搜索 记录 通 第 要 执行 额外 的 步 又 来 为 搜索 命名 ，[ 以 
| 后 用 ;显示 地 这 搜索 内 容 有 的 做 法 对 搜索 记录 的 你 存 比 


EE GEHEN. ELITR. PREAS OBA XC iU UR 
—— 户 需求 。 

TUNE 

Recent search B 

Recent ( 

Recent s 

Recent s 

Recent ; 


搜索 表单 
尽量 减少 输入 域 的 数量 。 为 特定 的 操作 系统 选择 适当 的 


Search 

x 输入 控制 。 参 考 最 佳 的 表单 设计 案例 (对齐 方式 、 标 
| 答 、 尺 寸 等 )， 参见 第 2 章 ， 

nrer 
Show 100 Results 


搜索 结果 /浏览 结果 
标明 已 找到 搜索 结 示 的 总 项 数 。 使 用 延 开 加载 ， 而 不 是 
分 页 显示 的 方式 。 设 定 一 种 合理 的 默认 分 类 模式 。 
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A.2.6 分 类 模式 


(ee 
Highest Pnce 
Lowest price Y 


Newest 


Most popular 
Recently popular 
Highest price 


Newest 


屏 内 分 类 

以 明确 的 方式 告知 用 户 当 前 采用 (生效 ) 的 分 类 选项 。 
如 琳 分 类 选项 无 法 很 好 地 与 触发 如 按钮 栏 融 合 ， 沽 虑 使 
用 分 类 排序 选择 絮 。 


分 类 排序 选择 器 

根据 操作 系统 的 设计 惯例 选择 控制 搜索 结 末 分 类 的 方 
法 ， 或 使 用 不 受 操 作 系 统 影响 的 界面 方案 。 要 请 晰 地 办 
用 户 表明 当前 采用 的 分 类 选项 。 


分 类 表单 
在 使 用 这 种 模式 之 前 ， 应 该 首先 考虑 使 用 其 他 更 为 有 效 
的 分 类 选项 触发 右 或 分 类 排序 选择 礁 。 
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A.2.7 过滤 模式 


BEA wie 

RE aN Ail igs cin, ATER. AP de 
Hj 4 i pF eke A VE FE e EB NB SE FH 
这 种 过 小 模式 ， 参 见 9.2.3 1. 


Scope A — Scope B Scope C 


过 滤 容 器 

保持 选项 列表 简洁 ， 避 人 免 深 屏 。 如 来 列表 较 长 或 有 多 个 
TREM, ee Abie ee. Z 6.1 He Ue A ze 
数据 的 示例 。 


过 滤 对 话 框 
保持 选项 列表 人 简洁， 避免 深 屏 。 如 末 列 表 较 长 或 有 多 个 
TRM, ee Abie. Zbl 6.1 He ue Al Ze 
数据 的 示例 。 


Apply 
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Criteria 
Criteria 


Criterio. 


和 如 py 


A.2.8 工具 模式 


TERE 

AN EAE UE a IT EERROR, fal LAY EAEE 
ae LUE A ao A tS A, ROR Eee, ， 请 参 
芳 优 秀 的 表单 设计 案例 。 


IARE 

工具 栏 通常 显示 在 屏幕 底 端 ， 包 含有 屏幕 级 的 操作 。 工 
具 栏 内 的 图 标 应 该 是 用 户 熟 悉 、 易 于 识别 的 ， 或 者 采用 
标签 加 图 标的 设计 。 


选项 菜单 

如 采 可 能 ， 采 取 直 接 交 互 式 的 议 计 方案 。 不 要 把 导航 隐 
藏 在 选项 薪 单 中 。 如 采 茶 一 屏 内 上 只 有 一 个 操作 选项 ， 苍 
虑 使 用 调用 动作 按钮 模式 。 
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Submit 


(« (+ ( (e (e 


调用 动作 按钮 

不 要 把 主要 操作 隐藏 在 菜单 中 ， 也 不 能 将 其 设计 成 无 法 
识别 的 工具 栏 图 标 。 一 定 要 让 其 显而易见 ( 民 好 的 对 比 
AR), PARAH (含义 清晰 的 标签 )。 


情境 工具 

如 采 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 如 琳 需 要 按 
钮 ， 尽 量 将 其 放置 在 可 操作 对 象 的 旁边 。 使 用 用 户 熟 悉 
或 市 有 文字 标签 的 图 标 。 


内 联 操作 

如 果 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 操 作 应 该 布局 
在 接近 于 可 操作 对 象 的 位 置 。 使 用 用 户 熟 悉 或 带 有 文字 
标签 的 图 标 。 每 个 对 象 最 多 只 能 有 1~2 种 内 联 操作 。 
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多 状态 按钮 
多 状态 按钮 非常 适合 一 系列 联系 紧密 、 
一 一 一 在 有 限 屏幕 空间 内 连续 执行 的 操作 。 


批量 操作 
诸如 删除 和 重新 排序 之 类 的 批量 操作 最 好 在 编辑 模式 下 
进行 。 提 供 明显 的 选项 ， 让 用 户 可 以 退出 编辑 模式 。 


A.2.9 图 表 模 式 


市 过 滤器 的 图 表 

使 用 标准 的 UI 过 滤 控 制 副 以 及 过 滤 模 式 ， 参 见 第 4 
革 。 动 态 更 新 图 表 数 据 ， 而 不 是 扔 给 用 户 一 个 “应 用 ” 
FEAL 


\ 


GAS x _) m _} (im } 


4 u A 


Te Pss al OA Ed 

Pel Ze P EPU FI A af A e HUE AE TAS HL. A 
琳 是 可 交互 的 预览 窗口 ， 使 用 较 大 的 触摸 对 象 更 易于 用 
户 的 操作 。 


总 览 加 数据 式 图 表 
测试 图 表 ， 看 看 用 户 是 否 能 回答 以 下 三 个 简单 的 问题 : 
主题 是 什么 ”哪些 信息 最 为 重要 ? 最 重要 信息 的 具体 数 


eB? 


m 


数据 点 细节 图 

网络 应 用 的 图 表 让 人 们 形成 了 通过 “指针 巧 停 ”操作 
碍 看 细 贡 的 心理 预期 。 你 可 以 考虑 通过 “ 按 下 并 持续 
操作 来 显示 数据 点 的 详细 信息 ， 提 供用 户 所 需 的 更 多 


内 容 。 
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详细 信息 图 
吸引 用 户 查看 更 多 的 数据 。 用 面包 习 式 的 导航 显示 层级 
结构 。 


缩放 图 表 
诱导 用 户 旋 转 设备 来 以 全 屏 方 式 查看 图 表 ， 在 用 户 转 回 
设备 时 目 动 恢复 导航 。 


数据 透视 表 
在 一 屏 内 显示 数据 透视 图 表 的 已 选择 项 和 选择 结 末 。 根 
据 用 户 的 选择 动态 更 新 内 容 。 
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火花 谱 线 图 
遵守 火花 谱 线 设计 的 惯例 ， 让 用 户 测 试 设计 方案 。 结 合 
火花 谱 线 和 详细 信息 图 显示 图 表 的 所 有 细节 信息 。 


A.2.10 视觉 吸引 模式 
对 话 框 
IHREN Z — 4E ET BER. BAD RI EB E fi 
方式 访问 程序 的 使 用 说 明 。 


提示 

提示 要 尽 可 能 地 接近 它 所 指 癌 的 功能 ， 保 持 内 容 的 简 
洁 ， 在 交互 开始 时 (也 就 是 当 用 户 触摸 屏幕 上 时) 关闭 
提示 。 
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000/459 


DO THIS 


THEN THIS 


使 用 回 导 
使 用 向 导 能 很 好 地 从 用 户 使 用 目标 的 角度 出 发 ， 突 出 应 
用 的 主要 功能 。 兼 顾 内 容 简洁 和 视觉 效果 。 


视频 演示 
视频 演示 可 以 展示 应 用 的 关键 功能 ， 也 可 以 用 来 显示 应 
用 的 标准 使 用 流程 。 一 定 要 提供 第 见 的 视频 控制 选项 


(EIE. SEE. Hd). 


ZITA 

EHIN Fret CY ERRE, ANE A EEE ties 
得 的 混乱 不 堪 。 一 旦 交互 过 程 开始 (也 就 是 用 户 开 始 触 
tbe), BUERERAJATH. 


附录 | 201 


Top to get started 


首次 使 用 引导 

一 定 要 利用 图 像 或 其 他 视 希 线索 明确 地 将 首次 使 用 5| 导 
与 其 他 内 容 区 别 开 来 (也 就 是 说 ， 不 要 为 视觉 吸引 元 素 
使 用 那些 常规 内 容 所 用 的 颜色 、 字 体 大 小 )。 


持续 视 项 吸引 
保持 持续 视觉 吸引 | 元素 的 简洁 。 用 图 像 或 其 他 视 沈 线索 
清晰 地 将 视觉 吸引 与 其 他 内 容 区 分 开 来 (也 就 是 说 ,不 


Add a cord 
要 使 用 常规 内 容 所 用 的 颜色 、 字 体 大 小 等 )。 
可 发 现 的 视觉 吸引 
Pull +o refresh Fa RSL MiSs], —EZRZA E, HIT. 
最 常见 的 这 种 视觉 吸引 模式 是 鼓励 用 户 刷新 数据 的 提示 。 
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A.2.11 反馈 模式 


Ay Email is required 


出 错 信息 


用 纯 语言 的 形式 提供 解决 问题 的 办 法 。 保 证 错误 信息 
T 清晰 可 见 ， 在 屏幕 内 和 能 入 错误 信息 ， 不 要 使 用 模式 对 
| ma TATE. 

User Name 
Password 
Register 


QJ Registration complete 
| 


确认 


当 用 户 执行 某 项 操作 时 ， 提 示 确 认 信 息 ， 但 不 要 打 断 用 
户 使 用 产品 的 过 程 。 参 见 第 10%, SiS p. 


系统 状态 


| Email 


告知 用 户 系 统 的 状态 。 为 可 
tk HB" EM, 


能 会 持续 较 长 时 间 的 操作 提 
User Name 
Password 
= IS Submitting . . . 
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A.2.12 功能 可 见 性 模式 


触摸 
用 常 见 的 视觉 效果 来 暗示 可 触摸 的 控制 项 。 一 定 要 小 心 
谨慎 地 使 用 三 维 效 果 ， 泛 小 的 阴影 和 斜 角 效果 会 降低 可 
PRE 


Submit 


Zi 


过 
xi 


ii 


TITS a as, BO aN FR R AN AHJ— Bb Aer AUH 
Ob TARE SAA. DREH c ero TI 


SÉ IR GR 
Rat ve 
W R 2 


je B2 
拖 动 手柄 的 图 标 一 定 要 易于 识别 。 为 拖 动手 柄 设计 一 个 
突出 的 效果 ， 以 此 告知 用 户 这 一 对 象 是 可 操作 的 。 
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A.2.13 帮助 模式 
”使 用 说 明 
"-— 在 使 用 说 明 中 综合 使 用 屏幕 截图 、 插 图 和 文本 等 多 种 


形式 .。 
Browse Help Topics 
Top Questions 
Report a Bug 
Give Feedback 
| 界面 元 素 说 明 
| 界面 元 素 说 明 是 优 民 设计 不 可 或 缺 的 部 分 ， 它 可 以 让 用 
1 户 很 快 习惯 产品 的 使 用 方法 ， 也 能 提高 使 用 效率 。 
3 4 


1) desc nption 
2) desc nprion 


3) dest nption 


4) destnphon 
| | f FA f] = 
| fs FA I1 Ss Hr. HJ iE RR BEA SBE, ae AEA 
用 户 的 使 用 目标 开始 。 癌 导 的 设计 应 该 简短 、 充 满 吸 
5| 力 。 
< » 
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大 于 作者 


Theresa Neil 是 德 克 院 斯 州 奥 斯 洒 市 的 一 名 用 户 体 验 咨 询 师 。 她 组 建 了 一 个 用 户 体 验 
设计 小 组 ， 其 中 的 设计 师 和 开发 人 员 都 具有 十 分 丰富 的 从 业经 验 。 她 的 设计 小 组 与 客 
户 紧密 协同 ， 致 力 于 创建 能 令 人 产生 愉悦 、 提 升 工 作 效 率 和 自信 心 的 产品 。 她 最 新 的 
项 目 是 为 餐馆 设计 一 球 困 面 应 用 程序 ， 让 客户 能 在 自己 的 餐 时 前 点 餐 。 其 他 更 多 项 


WA 


EH. AE ah Ay ek www.theresaneilcom， 或 访问 她 的 Twitter ll&  @theresaneil, 
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移动 应 用 UI 设计 模式 


当 你 迫 于 压力 ， 有 要 制作 出 设计 精 民 、 易 于 使 用 的 移动 应 用 时 ， 根 
本 就 没 时 间 进 行 完 全 的 创新 。 这 本 人 简要 的 手册 提供 了 70 多 种 移 
动 应 用 设计 模式 作为 参考 ， 包 括 了 从 当前 :OS、Android、Black- 
Berry, WebOS, Windows Mobile 以 及 Symbian 平台 中 提取 的 400 多 
张 应 用 截图 。 


用 户 体验 设 计 大 师 Theresa Neil 将 向 你 介绍 包括 反 模 式 在 内 的 10 种 
不 同类 型 的 设计 模式 。 无 论 你 正在 设计 一 款 简单 的 iPhone 应 用 ， 
还 是 开发 适用 于 当前 市 场 上 所 有 流行 移动 操作 系统 的 上 应用， 这些 
设计 模式 都 能 助 你 一 辟 之 力 。 
本 书包 括 以 下 设计 模式 
m Sh: 主要 导航 和 次 要 导航 模式 
表单 : 改变 全 行业 不 展 的 表单 设计 习惯 
表格 和 列表 : 只 显示 最 重要 的 信息 
搜索 、 分 类 和 过 滤 : 让 这 些 功能 易于 使 用 
: 营造 直接 交互 的 体验 
Ak: 借鉴 基本 图 表 的 经 典 设计 理念 
视觉 吸引 : 吸引 用 户 并 促使 其 发 现 产 品 功能 
控制 与 反馈 : 帮助 用 户 执行 操作 并 及 时 提供 反馈 
帮助 : 把 小 型 设计 理念 应 用 到 帮助 页 面 的 设计 中 去 


E EH NH EH NH NH HB HN 
H 
Am 
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电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同行 还 在 犹 
豫 仿 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
厂商， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 
体验 : 在 线 阅 读 和 PDF。 


相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 〈 即 使 
。 读 者 还 可 以 方便 地 进 


有 的 书 纸 质 版 是 黑 日 印刷 的 ) 
行 搜索 、 静 贴 、 复 制 和 打印 。 
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图 灵 社 区 进一步 把 传统 出 版 流程 导电 子 书 出 版 业务 
紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 掖 术 书 “出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
提前 消灭 书稿 中 的 销 误 ， 最 大 程度 地 保证 图 书 出 版 


的 质量 。 
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图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 功能， 你 就 能 联 
合 二 三 好 友 蕉 同 创 作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 


图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
A. SR, 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 古 
需要 有 坚强 的 新 力 的 。 
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误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
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